Esse post foi originalmente publicado no Medium do autor. Confira aqui.
This is the second and last part of a series of posts in which I’ll tell a story about developing an idea into a product and delivering it using many different tools. If you miss the first post , check it out here.
Nothing fancy here, just a few routes due to the simplicity of the project .
Nowadays it is extremely important to deliver your product on several different screen sizes, huge part of your audience will come from mobile devices and so on. Responsive web design is the way to answer that question, but many times write everything from scratch worring about media queries and all that stuff is not the best answer . I’ve selected Foundation to be my css framework, so I can focus on the unique parts of my product and trust the framework to provide the always needed responsiveness infrastructure.
A custom.js file to hold all the logic of the project, even being a very tiny project things start to get a little messed up. It was time to reach out for a better strategy. Searching for a cleaner and more organized way to create modular javacript code on the client side I’ve bump into Browserify, and I must say it really does the trick. Following its guidelines I’ve decomposed my monolithic custom.js into six different files, each one with a clear and concise single purpose, enhancing the system modularity and making it easier to evolve and adapt to changes. Browserify uses a node.js like syntax to integrate different modules, so basically I was “speaking” the same backend “language” on my frontend side.
Adding files by hand. Isn’t that Outdated ?
For a very long time everytime that I’ve decide to checkout some new library or framework both on css and js I’d download the file and add it to the project. Not a big deal, it does work, right ? Having experience with other technologies sometimes makes you a little suspicius and annoyed with this “does work” thing . Everyone that ever worked with Bundle or Cocoapods or any other dependency manager system for the sake gets very frustrated to have to add this pieces to the project puzzle by hand. Wouldn’t be nice if client side development could have something similar ? Yes it definitely would, and it has, Bower , very nice to meet you. So now my client side code was looking good, dependency manager, modularity and responsiveness. What else?
PageSpeed ? C’mon bro!
After all that, I’ve decided it was good enough and that it’s time to let people try the product. So i’ve upload it to parse, parse deploy is all that took to sent everything to the cloud and make it available, cool right ? I’ve checked the page on my phone and it was not as fast as i wish, dammit. So i’ve ran the pagespeed insights from Google Chrome to get… Well, let’s say, insights. The result made me realize that I’ve had spent to much time way from client side and frontend development and many common sense things were not so common to me. Must say that I’ve lost a few minutes enlightening myself about some pageload good practices such as:
- only one css file
- only one js file
- concatenated css and js
- minified css, js and html
- optimized images
I need something to handle all those tasks, a task runner was needed, and I’ve found one. Gulp.
Wrapping it all
Playing with Gulp was very handy and easy from the start. It allowed me to handle all those tasks and even create watches on my files to run the tasks when need it without my intervention.
I’ve could spent many words here talking about how great it is to adopt all this tools on a project, but I will show some stats … Oh, yes, show me those stats!!
Beginner Frontend Dev , page took 2.82 seconds to load.
After enlightenment , page took 0.7 seconds to load. Four times faster.
So this was me, playing with frontend and developing a product to make my life as a mobile developer easier, it is always good to learn new things leave your comfort zone and stretch your knowledge a little. During this project I’ve left the jurassic age of frontend development and enter the new age with an automated development pipeline for client side. =)
You can check the project code here. Any thoughts or doubt ? Leave a note …