UFC — The Ultimate Frontend Catch up (1)

Fabrício Mendonça
3 min readJan 30, 2017

--

Preliminary Card

Old stack vs New stack

https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.c9n9dbo2w

Round 1

I started developing web applications professionally in 2003, with PHP, MySQL and Actionscript. In 2004 I worked at Agência Click (now Isobar) and learned HTML, CSS and Javascript with my guru Fernando Aquino, Marco Noleto and Marco Gomes.

Since then I’ve worked in many projects with those technologies, always using the newest libraries and frameworks. But in 2012, when I started working at Supremo Tribunal Federal (Brazil’s Supreme Court) I had to stop programming because I was in the support and IT Service Management teams. I’ve only developed small applications like an automated network printers installer with Power Shell, a computer description editor with HTA, VB Script and XML and some Javascipt (jQUery) codes to customize a PHP MyFAQ template and some custom JIRA fields - I forgot to mention: I became a JIRA Administrator too.

In 2015 I was invited to join a dev team and was supposed to work with new front end stack, but the projects were built with Angular 1, CSS2, HTML 4, and JSF 1.2 (argh!).

Knockdown! Old stack 10 x 9 New stack.

Round 2

After the knockdown the New stack took a breath and started the second round focused.

I decided to know more about a "secret" project in STF: STF-Digital. The project leader explained to me the application's architecture and the front end stack.

A lot of new names appeared and I felt like they were building a rocket or something like that: Node, NPM, Bower, Gulp, Jasmine, Karma, Superstatic, TypeScript, SASS. But there were some old names too: Angular, CSS3, HTML5, JSON.

OK, let's research and study all the new stuff… After a couple of weeks I was ready to contribute with the project.

3 takedowns by New stack! Old stack 19 x 19 New stack

Round 3

The final round started with a perfect use of judo techniques by Old stack: some of the new names were actually not so new and Old stack took the New stack down.

I was in shock: I've studied some libraries thinking they were the most recent front end solutions, but realized that there were a lot of new ones on top of those. I read this article and LOL'd.

It's time to listen to the corner, so I asked my friend Leandro Ferreira from Work & Co who’s always up to date: which new front end libraries and frameworks that are worth it? React + Redux + Webpack FTW, he said. And ES2015.

The Old stack was on top, landing punches and controlling the New stack. But the New stack managed to sink in a triangle choke that got Old stack to submit[1] and won the fight!

New stack profile

  • NodeJS
  • NPM
  • ES2015
  • Webpack
  • React
  • Redux
  • Mocha
  • Chai
  • SASS
  • HTML5

It's time to form a new camp…

See you in the next fight.

--

--

Fabrício Mendonça

Senior Front End developer at Wunder Mobility, skateboarder, roller skater and bass player