By Natasha Postolovski, writer, maker, traveller.
Front-end development exists in a constant state of evolution. It has hurtled through several distinct eras: from tables to stylesheets, to ‘pixel-perfect’ CSS and HTML based on meticulously sliced PSDs, to an emphasis on semantics, responsiveness, and flexibility.
Techniques and innovations that were once considered cutting-edge, like responsive design and the use of CSS3 effects and transitions, are now accepted standards for many front-end developers.
Designs have become flexible and responsive. They enable rather than constrain server-side development, and are easy to update, revise and redesign. Markup is clean and semantic, and we can create beautiful designs without ever needing to open Photoshop (if we want to).
Things are good, but they’re getting even better. At Envato, we’ve noticed that the way we build the web is changing.
Smaller, more specialized tools
These tools have made an invaluable contribution to the efficiency of developers. But, as with any tool that fulfills many needs and solves many problems, a certain amount of bloat is part of the package.
In our own work, we’ve started to gravitate toward combining smaller, more specialized tools that do exactly what we need and little else.
In the last couple of years there’s also been a pretty huge swing away from monolithic frameworks to smaller, more specialised tools. React is a good example of that – it deals purely with Views, where other JS frameworks give you the full MVC + routing + a bunch of other stuff.
– Ben Smithett, Frond-end Dev @ Envato Marketplaces
Pattern libraries and styleguides have improved front-end workflows across the web. Yet, one drawback of these practices is that the code is static and separate from the main application. Living Styleguides represent a movement to change this.
Living Styleguides use real code from the application. The UI for new features is built directly into the living stylesheet to create an instant prototype using sample data.
As a front-end developer working on a team with four back-end developers, it is easy to become a bottleneck. To prevent this from happening we’ve recently adopted a ‘Styleguide Driven Development’ approach. This means we build a feature’s UI directly into the Living Styleguide and create a working prototype straight away using sample data.
This allows us to iterate fast and separate the UX/design, front-end and back-end work so they are never waiting on each other.
– Jordan Lewis, Front-end Dev @ Envato Marketplaces
For many years, we judged the success of HTML & CSS code primarily by how well it replicated a given design. In recent years we’ve moved beyond this, and have started to evaluate front-end code as we would evaluate the back-end code that makes an application run. We look for code that is reusable, maintainable and scalable.
In this light, crafting our CSS architecture is one of the first steps in any design and development project at Envato.
While I’m a huge fan of preprocessor languages and authoring frameworks for CSS, I feel like the most important change has been the way I think about writing front end code. CSS architecture is a real thing now, and methodologies like OOCSS and SMACSS help us apply programming best practices to produce maintainable, reusable code that makes everybody happy (even Ruby developers).
– Tom Bryan, Designer @ Envato Marketplaces
Coupled with designing our CSS architecture, we build applications by breaking CSS into small, isolated components. Each component can be altered without affecting the others, and components can be re-used again and again, like building blocks.
The biggest changes for me have been thinking about front end design and development in terms of components rather than pages.
– Ben Smithett, Front-end Dev @ Envato Marketplaces
Design tools that output (good) code
The rapid pace of change in front-end development hasn’t been matched by similar advancements in tooling. After Adobe Dreamweaver was criticized for poor code output, the industry questioned whether a software tool could ever produce code that a developer might be proud of. Adobe de-invested in the space, and for a long time there were few other serious players in the industry.
Things appear to be changing with the launch of Macaw and Google Web Designer, two visual design tools that output high-quality code. We were so excited to see innovation occuring in this space that we pledged significant backing to Macaw’s Kickstarter campaign.
The interaction between design and development involves inherent inefficiency and duplication that tools like Macaw aim to solve.
You essentially have two options as a web designer. You can rely on a popular print design application to create a static mockup and translate it to code manually – wasting hours of time rebuilding what you’ve already created – or you can torture yourself (and your final design) by designing with code. I think we can agree that neither of these solutions make much sense.
– Tom Giannattasio, CEO/Founder of Macaw
What it all means
Since the early days of the web, designers, front-end developers and back-end developers have interacted like workers on an assembly line. The designer would create a PSD, pass it to a front-end developer, who would then pass along HTML & CSS code to a back-end developer to add programming logic. This workflow resulted in bottle-necks, duplication, difficulty scaling and making large changes, as well as missed opportunities for collaboration.
The new ways of working discussed in this article combine together to form something larger than themselves: the assembly line mentality is being replaced by workflows where designers, front-end developers and back-end developers collaborate together and can work concurrently as unified teams. This increases not just the speed of delivery for web applications, but quality and scalability as well.
We believe that design and front-end development workflows are finally reaching maturity. Not just within Envato, but across the internet.
It’s an exciting time to be involved in this industry, and we’re looking forward to the new improvements and tools the rest of 2014 will bring.
This article was originally published on Inside Envato.