Front-end architecture is everything but simple

Recently I was invited to present a talk about front-end development at a company event of my current work, which I did a couple of weeks ago. I was pretty nervous about it mostly for two reasons: a) I never did a presentation to a large audience like this(about two hundred); b) I thought that I needed bring the current most relevant content to that presentation. While I was making the presentation slides I realized that the second reason was about the complexity of front-end development nowadays.

If you, like me, started building websites in the early 2000s, with a bunch of tables, animated gif (OH, transparent gifs!) and marquee HTML tags, you know what I mean. But we must agree, the internet was a happy place those days.

Those days I started getting a little scared when something called Cascading Style Sheets came up. But didn’t take to long to fall in love with. Besides, make a web page open a popup window, or validate a contact form in JavaScript was something to be proud. That happened before I dive into the dynamic web pages generated by a spaghetti but still magic PHP code. I must say that I’m not feeling nostalgic, I’m just trying to put my point at the right context.

At that time and until recently, we was just concern to make things work and that is my point. All the presentation layer, the markup, the design and a bit that what we call now front-end development was afterthought. It something like “make it pretty” applying the designer layout to the backend current markup. The challenges and impacts of working like this was nothing but a bunch of CSS hacks and useless auto-generated HTML markups.

Think about a Magento-like e-commerce which you need to apply some layout made by the designer, that you might don’t know, and you may have no HTML markup control but the CSS and JavaScript only. What are the results that you might expect but CSS hacks, reflows and repaints? How can we avoid this so common situations?

Front-end architecture

The Front-end Architect needs to participate in the development process from the beginning, where we start to answer some questions on the front-end side.

  • What architecture do we will use? Server-side/client-side MVC/MV*?
  • What components do we will use?
  • Application structure and naming convention?
  • CSS structure?
  • Developers workflow?
  • What are the content types?
  • Performance, linting, compiling, minifying, bandwidth, end2end tests, unit test, service mocks…

You might think these are Software Architect calls and I’ll respectful disagree. The Software Architect role have a lot of responsibility already like all the backend side, service APIs, database, cloud, etc.

We need to plan

Front-End Architecture has a collection of tools to improve the quality of the code while creating a efficient, modular and sustainable workflow. We need to plan the steps will a developer take to write lines of code and see that code throught the production code, which involves version control, task runners, CSS preprocessors, test suites, documentation tools and server automation. And we need to provide this workflow quick and easy to use.

Our audience isn’t the product’s end users, but the developers themselves.

We need to think about the design

I don’t mean the look & feel or User eXperience, but the standards and how this will be repeated throughout the application. The front-end architect will define a clean view of how the code of the final product will look like. It will take the necessary decisions to maintain a standard code and structure where the front-end developers can follow.

We need to write code

The front-end architecture isn’t something that you will write once and give you back to it. The product needs as the developers needs will change and envolve over the time. It will be required to change current features, add new ones and even — the dream — remove some. It doesn’t mean write less code, but it may have different goals than the front-end developer’s code because the goal is make an environment where these adjustments will be easier to the developers - or himself - work with.

We already live on Marty’s McFly future

And the front-end field isn’t getting easy but even more complex, bigger and won’t stop right there. So we need to stop looking at this area as something that developer can’t just slap it together on the project end process and go out.

There’s no reason to treat this area as something that doesn’t matter. Actually, I just can’t realize why there’s so much noise about the importance of the front-end development whether is this what your customer/client/user see of your product.

This is a great area to dive into. =]