The UI team deliver the HTML files to the development team. Developers code PHP on html files to make the website. But later we face a lot of changes in design. The designing team makes the changes in HTML file and the developers find the committed changes and integrate the same in PHP files. Sometimes the HTML changes won't fit properly in php files. More and more changes in later changes, it tends to have HTML files are completely different from PHP files. It becomes more headache to developers.

What is the best practice to synchronize HTML and PHP in other words UI team & Developer team in web development ?


The problem here is that the two teams are not working together, but that the developers are supposed to reimplement the HTML. This slows the designers down and wastes the developer's time.

Instead, the teams should work closer together. In particular, the files that the designers create should be put into production with minimal changes. How can this be possible?

Use a template engine. Don't directly put PHP into HTML files, but use separate templates that are rendered by your PHP application. Give your designers a tool to test these templates, possibly an easy to deploy version of the application itself. Writing templates involves a tiny bit of programming, but it is mostly just about inserting the correct variable or maybe a few conditionals and loops. Templates are also great because the designers can insert a bit of presentational logic here, instead of having to negotiate this with developers.

PHP itself can be used as a template engine, but it is too powerful and has a potentially difficult to understand syntax. So the templates that the designers work on should be editable without having to understand PHP.

In extreme cases, some web sites move to "client site rendering", where the HTML is created by JavaScript in the browser. This is attractive because the design can move forward without having to change anything on the backend. But except for web applications that truly benefit from client-side rendering, this is dysfunctional. It is better if designers and developers work together rather than using technologies that lets them avoid each other.

When writing templates, you may have separate templates for reusable components. But these components might also have individual styles or JavaScript snippets. How can you organize them? You could organize them by type, i.e. keep all templates together and all styles together. This makes deployment easy but makes changes more difficult, as changes to one component are spread throughout parts of your project. It is often better to organize them by component, so that a widget's template, style, and other assets sit next to each other. You would then bundle the styles and assets before deployment, so that the browser doesn't have to download hundreds of small files. The modern JavaScript ecosystem has exquisite support for doing this bundling. You could also follow Yandex's BEM method to organize your components.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.