Front-end: The Beginning, the End and the Middle

This is a video version of the content in this article that I published on my YouTube channel.

Worth watching! 😁

📚 Recommended books about AI

• Nexus - Yuval Harari
• Homo Deus - Yuval Harari
• 21 Lessons for the 21st Century - Yuval Harari
• The Coming Wave - Mustafa Suleyman and Michael Bhaskar
• The Fourth Industrial Revolution - Klaus Schwab

Front-end: The Beginning, the End and the Middle

“We don’t need Front-end Developers anymore. AIs already build entire applications on their own.”

Statements like this have become common, as if front-end were something trivial and almost disposable.

But anyone who has really worked with front-end knows it hasn’t been just about interfaces for a long time. It’s about delivering performant, accessible and scalable experiences while dealing with business expectations that change constantly.

My Journey and the Evolution of Front-end

My front-end journey started between 2007 and 2009, in a curious time when the profession didn’t even have a defined name. We were “web people”, “web designers”, and the “webmaster” was a sort of old-school full-stack developer, taking care of every layer of the application, from front to back, and even the infrastructure, all in a pretty rudimentary way.

“Web design” was the term closest to what we now understand as front-end, focused on the interface and with heavy CSS work, often creating the design before the implementation.

To give you an idea, in 2011 my job title on my employment record was still “Junior HTML Programmer” 😅

Descobri que tenho um registro como "Programador HTML" na carteira de trabalho pic.twitter.com/nn3SQm8UVT

The term “front-end developer” started to become popular a bit later, maybe around 2012.

Back then, Flash ruled. Besides HTML and CSS, people often preferred Flash and ActionScript to build solutions, because it was easy to create animations and new projects.

But an unexpected event completely changed the history of front-end: the arrival of the iPhone.

In 2010, Steve Jobs released a manifesto announcing that Flash would not be supported on the iPhone because it was a proprietary technology with security problems, encouraging the use of HTML, CSS and JavaScript.

It was a game changer.

With Flash discouraged, the technology practically died, and HTML5 and CSS3 got a significant boost. CSS3, in particular, brought advances that made front-end development much more efficient.

Around that time, a little before or after, the first JavaScript frameworks and libs showed up, like jQuery, which revolutionized how we wrote JavaScript, with its famous slogan “write less, do more”. jQuery and its countless plugins for carousels, sliders and modals, which seem trivial today, were extremely complex to build by hand before.

At first, most front-end professionals worked at agencies, building websites, landing pages and static applications, with a huge aesthetic focus. There were even awards for the best sites built with CSS, the CSS Awards, which highlighted design and aesthetics, but not necessarily user experience.

Remember that? haha

The shift toward more complex applications started with the arrival of Node.js and, later, AngularJS, around 2011.

AngularJS, initially a solution for reactive forms, was soon adopted to build entire applications, popularizing the concept of Single Page Application (SPA). Node.js also brought front-end developers closer to the back end and the terminal, allowing the automation of tasks like optimizing images and minifying CSS, which used to be manual.

With Node.js becoming popular and market demands evolving, driven by the need to support smartphones, the focus shifted from landing pages to much more complex and robust applications.

Between 2015 and 2020, we saw a boom of new front-end frameworks and libs. It was a chaotic environment, but it drove the fast development of the profession. New solutions influenced the existing ones, making them more robust.

It was chaos, but I really liked it. It was a time of lots of innovation and creativity.

The Persistent Illusion That Front-end Is Easy

Front-end costuma ser acessível pra quem tá estudando programação

Vc cria um HTML, um CSS e pronto, já dá pra ver resultados na hora

Isso cria a falsa impressão de que é fácil, mas não é bem assim. Com o tempo, o Front fica tão complexo quanto Back, só que de um jeito diferente

It’s curious how, since the early days of the web, back in the hunter-gatherer times, there’s been this perception that front-end development is a simple, almost intuitive task.

I remember that back then the prevailing idea, especially for people on the outside, was that the job boiled down to “painting buttons”, giving a website its visual life with a few lines of HTML and a pinch of CSS.

This simplistic view is rooted in the very nature of learning front-end at the start. Unlike other areas of programming, the first steps are incredibly tangible.

You write a bit of HTML to structure, CSS to style, save it as an .html file and, boom, open it in the browser and the result is immediate and tangible.

Getting positive feedback this fast creates a trap: the illusion that this initial ease extends through the entire journey of the front-end developer.

Big mistake.

As we go deeper, we discover a universe of complexity, with layers and challenges that go way beyond just manipulating visual elements. And that old perception of simplicity finds an echo in today’s scene, driven by the rise of Artificial Intelligence and code generation tools.

The ability to create complex interfaces with a few quick prompts reinforces the idea that front-end is not only easy, but also increasingly dispensable.

But that shallow view ignores the depth of knowledge and the many skills that a front-end professional really needs to build robust, performant, secure and accessible applications.

The initial ease is just the tip of the iceberg of an area that’s constantly evolving and enormously complex.

The Essential Knowledge for Modern Front-end

If you want to generate applications with AI and actually scale them, you’ll need to deeply understand these things. Because nothing generated by AI will hold itself up, and someone will need to understand what’s going on behind the generated code, how to integrate it with other parts of the system and how to make sure the user experience is the best it can be.

For that, it’s crucial to master:

• Core Languages:
  • HTML: Semantics, accessibility (WCAG, WAI-ARIA), SEO.
  • CSS: Specificity, properties, selectors, layouts (Grid, Flexbox), transitions, animations, transforms.
  • JavaScript: Modularization (ES Modules, CommonJS), DOM manipulation, Fetch API, Hoisting, Event Bubbling/Capturing, Scoping, Prototypes, Classes, Async/Await, Promises, Observables (RxJS).
• Frameworks and Libraries:
  • JavaScript Frameworks: React (Hooks, Context API, Render Props, Redux, Zustand, React Query, React Router), Vue (Composition API, Options API, Vuex, Pinia, Vue Router), Svelte (Stores, Transitions, Routing), Angular (Components, Services, RxJS, Angular Router).
  • UI Libraries: Component Libraries (Material UI, Chakra UI, Ant Design), Styling Libraries (Styled Components, CSS Modules, Tailwind CSS).
• Development Tools:
  • Bundlers: Webpack (Loaders, Plugins, Optimization), Vite (ESBuild), Parcel, Rollup.
  • Task Runners: npm scripts, Gulp, Grunt.
  • Linters and Formatters: ESLint, Stylelint, Prettier.
  • Test Runners: Jest, Mocha, Chai, Jasmine.
  • E2E Testing: Cypress, Playwright, Selenium.
  • Package Managers: npm, yarn, pnpm.
• Concepts and Architecture:
  • Architecture: Component-Based Architecture, State Management Patterns (Flux, MVC, MVVM), Monorepos (Nx, Lerna), Microfrontends (Module Federation, Single SPA).
  • Design Patterns: Higher-Order Components, Render Props, Hooks, Composables.
  • SSR/SSG: Next.js, Nuxt.js, Astro, Remix.
  • PWA: Service Workers, Cache API, Web App Manifest.
  • GraphQL: Apollo Client, Relay.
• Infrastructure and Deploy:
  • DevOps: CI/CD Pipelines (GitHub Actions, GitLab CI, Jenkins), Docker, Kubernetes, Serverless (AWS Lambda, Netlify Functions, Vercel Functions).
  • Version Control: Git, GitHub/GitLab/Bitbucket.
  • Cloud Platforms: AWS, Google Cloud, Azure, Vercel, Netlify.
• Performance and Optimization:
  • Web Vitals: LCP, CLS, FID, TTFB, INP.
  • Code Splitting, Lazy Loading, Tree Shaking.
  • Image and Asset Optimization.
  • Caching Strategies (Browser, CDN).
• Security:
  • XSS, CSRF, CSP.
  • Authentication and Authorization.
• Accessibility:
  • ARIA Attributes, Semantic HTML.
• Soft Skills and Collaboration:
  • Effective communication.
  • Clear documentation.
  • Empathy and collaboration with designers, backend developers and product managers.
  • Problem-solving and adaptability.

All of that just so that, in the end, you still make sure the application works across different browsers, resolutions, bad connections and devices with limited resources.

Desenvolvimento Front-end é simples, precisa saber pouca coisa:

- HTML: Semântica, SEO, Acessibilidade, etc
- CSS: Especificidade, Propriedades, Seletores, Grids, Animations, etc
- JS: Manipulação de DOM, Fetch API, Hoisting, Prototype, ES6+/ESNext, Async/Await, Promises, etc

The Future of Front-end in the Age of AI: A Realistic Perspective

One really interesting thing about this whole AI story is how much easier it got to learn a new language or framework.

It used to be super complex, with weeks studying documentation or even taking courses. Today, with a few prompts, we can get by in days. That’s undeniable.

But, like I said, to use this tool properly, we need the foundation, the programming logic, to know what to ask and to understand whether the output is really the best one for that context and whether it follows best practices.

Another thing I notice is that being an extreme specialist, sometimes in a single framework only, is becoming less and less interesting.

I never saw much sense in defining yourself as a “React Developer” or “Vue Developer”. That always sounded like a limitation to me, like we were putting ourselves in a box.

Evite ser

❌ React Developer
❌ Vue Developer

Prefira ser

✅ Front-End Developer
✅ Software Engineer

Não se limite numa tecnologia ou framework especifico, quanto mais flexibilidade melhor. Tecnologias podem morrer enquanto você vai seguir trampando como dev

Seja agnóstico

That makes even less sense now, because it’s getting easier and easier to move between technologies. The key is to learn the foundation of front-end so you can be flexible and adapt to whatever language or framework shows up.

I see the trend being that we become more generalist front-enders.

Start getting interested in DevOps, infra, back end, UX and even business. That will make us stand out and let us build more complete solutions.

And that’s where the famous soft skills come in.

A lot of people still think that’s nonsense, but it’s going to be more and more crucial, especially communication. With so many non-tech people using AI to try to build things, we’re going to have to be the translators from technical to the “real world”.

And good communication applies to everything, including communicating with AI and getting the best out of it, with much more efficient prompts.

And to wrap up, one thing I’ve always noticed in the best devs: resourcefulness. Being proactive, solving problems, adapting fast.

Remember those Flash developers I mentioned at the beginning? What do you think happened to them? Did they go sell coconuts on the beach?

I’d say no. Most of them adapted and became front-end developers, even using their existing knowledge of Flash and ActionScript to create amazing animations with CSS and JavaScript.

Tem uma característica marcante nos melhores devs que conheço

São total desenrolados

Não importa a demanda, sempre dão um jeito de resolver, mesmo fora da área de especialidade ou atuação

Se eu pudesse dar só uma dica pra quem tá começando em tech seria essa:

Seja desenrolado

In short: front-end isn’t going away, but it keeps evolving.

AI is a powerful tool, but the knowledge, the experience and the resourcefulness of front-end developers remain irreplaceable for building applications that really work.