The Modern Front-End Workflow—From Start to Finish

January 30th, 2014 by Harry

Front-end engineers have gone through a bit of a renaissance in recent years.

There’s been a wild and wonderful spurt in innovation that has completely changed what it means to be a front-end developer.

We now have a vast and wide array of tools available to us, allowing us to develop faster and smarter.

We now can push the limits of what a modern web browser can do, accomplishing things that two years ago seemed impossible.

Bottom line, right now is an amazing time to be a front-end developer.

Start

modern-frontend-start

Today there is almost zero friction to getting set up with a new project. Everything that you need to get started is only a few key strokes away thanks to some powerful new tools.

Git is the version control system of choice for most developers nowadays. It makes sharing code easy and frictionless. When you want to get going on a new code base you only have to run the simple git command of git clone and all the code and all of its history is downloaded directly to your computer.

NPM is the node package manager. It allows developers to package their nodejs code a self contained module and then share it with the community. There are npm packages that provide almost every type of functionality you can imagine, allowing you to leverage the work of the community. Each new project has their own unique set of dependencies they require for them to work. To get all these dependencies installed locally you only need to run npm install, which downloads and installs everything you need.

Bower is a package manager for third-party web libraries. Historically if your project requires jQuery be included you would have to navigate to the jQuery website, download the file, extract it, and move it into your project. Bower simplifies that process by giving you the command bower install which handles getting jQuery into your project.

Development

modern-frontend-develop

Actually coding and developing your project is where most time is spent. Nowadays this is one of the most enjoyable parts due to the many wonderful tools available. These tools make dev’ing so smooth that I’d dare say it makes it fun. Scratch that – it makes it oodles of fun.

GruntJS is the most popular task runner amongst front-end developers. There’s already a huge community of grunt plugin authors that to date have written over 2,000 Grunt plugins, all of which are immediately ready for your use. Grunt allows you to automate rote tasks without breaking a sweat. For example if you need to compress all your jpg, gif, and png files you can use the imagemin grunt task .

CSS Preprocessors like LESS, Sass, or Stylus have made it easy to architect maintainable, extendable, and modular CSS. Among the many features that CSS preprocessors provide the two of most value are without a doubt nested selectors and variables. Having the ability to define a color variable in one location and use it throughout allows for a flexibility in CSS that did not previously exist, yet one that was sorely needed.

LiveReload changes the way you develop, as it brings a fluidity to your development flow that you didn’t realize you needed. Whenever you change a file that you’re working on LiveReload will notice that it changed and refresh your browsers so that you can immediately see your changes in place. No longer do you have to save a file, switch to the browser, and then refresh the page. With live reload after you save a file the browser will refresh itself, saving you time and grief.

Review

IMG_1083

When you’re ready to push some of your code into the wild it’s always a good idea to review it with your team and run it through some code quality and style tools.

A GitHub Pull Request is one of the handiest ways that you can rally your team around vetting your changes. After opening a pull request you’re given a page that allows you to clearly state what you changed along with a view that shows the changes you made. Coupled with a robust comment system, a GitHub pull request makes it easy for your team to review and give feedback on changes.

JSHint is a tool that programmatically finds errors in your code. It’ll prompt you if you have a function with two arguments, and the second argument is never used, or if you’re missing a semicolon where one should be. All these things ensure your code is in good shape, allowing your teammates to focus on other things that aren’t as nit-picky as JSHint.

JSCS is another tool that is great to have in your repertoire. JSCS is a JavaScript code style checker, focusing on the style of your code and not the quality. You define what code styles you want and when you run your code through JSCS it’ll alert you if there are any areas of your code that are not inline with your project’s expectations.

Deploy

modern-frontend-deploy

Getting your code from your computer out into the world is the best part of development, as it’s when you get to share all your work with the world at large.

Continuous integration is a practice that enables and encourages getting your code to production frequently and without fear of breaking anything. A CI server will automatically perform tests across all products, not just the ones you touched. If any tests fail alerts are sent out and any changes to production are halted, preventing regressions from reaching production. When all tests pass your changes are merged into the production ready branch, assets compiled, and production is updated.

This makes the entire process of getting your changes live easy, effortless, and safe. You can view the progress of the CI server as it chugs along, letting you be kept in the loop of what’s going on without having to push the process along yourself.

Summary

The life of a front-end developer has never been easier. Browsers are getting better every day, and the tools we have at our disposal have never been better.

No longer are we wallowing in the shadow of legacy browsers, but we’re barreling ahead to stretch what’s possible in the browser.

The processes outlined above lets you worry less about minutiae and just focus on development and the product.

The life of a front-end developer is pretty damn good.

Sign up for new research, straight to your inbox.
  • http://fodoj.com/ Kirill Shirinkin

    Same for backend, huh :)

  • kwebble

    Nice roundup of tools. It mentions the tools I’d like to combine for frontend development.

    Do you know of a development environment, like an IDE or perhaps a common project configuration that combines these tools?
    It’s quite a large task to start from zero and integrate all this into a streamlined toolchain to produce the HTML, CSS and JavaScript for the frontend.

    If possible I would like to focus on producing the frontend itself, not being busy configuring a large number of command line tools.

  • Neithan

    Not very current, at least the development part, which seems it was written like 5 years ago. Apps like LiveReload were rended useless by others like Brackets (Adobe Edge Code). Should have also mentioned WebStorm/PHPStorm with its browser plugin and obviously Adobe Edge Reflow.

    • Moe

      edge reflow is the shittiest thing ever!

      • Neithan

        Any rationale or just bumping the keyboard with your head?

        • Moe

          I’m sorry for my mad comment but I have my reasons. So there was that project, a redesign of a webshop. I had to set up a working prototype and thought for myself: okay let’s try out Edge Reflow (We have an adobe CC subscription..so why not). Don’t get me wrong; I think this App is really really interesting and i love the idea behind it but there were so many bugs and problems with the output that i had to stop. For example: You can define some padding, borders or background-images for smartphones or globally – It didn’t work. It made me so angry to see that the setting for smartphones overrode the settings for the tablet. So you always had to do more steps. Maybe i didn’t know the app very well.. i don’t know – In the end i had that feeling that this program isn’t good for bigger projects. I think for a small web-project it’s good but there are a lot of improvements to do – I know it’s in beta-phase but my first experience was horrible..

          • Neithan

            First of all I was aiming at the completeness (or lack of thereof) of the article in terms of, well, its own title. “The Modern Front-end workflow from start to finish”.

            Second, I appreciate you taking the time to discuss your point further. What I got from your story is that you were using a still very bugged tool, for the wrong task (particularly at that time).

            It’s really an awesome concept, fairly well developed. Personally I don’t use it, I don’t see the point once you are fluent with any frontend framework like Materialize or even Bootstrap/Foundation. You just Emmet your way up to a working prototype in a breeze. Give it a second try, just for the kicks. Doesn’t have to be Reflow, Macaw or better yet Webflow.

            Cheers

          • Moe

            Your last paragraph got me :) I love frameworks too, but sometimes..you know, i think as a graphic designer i shouldn’t do too much code, because I want – in the best case, to create something just like it’s in my imagination but i couldn’t find a appropriate app for this yet so at the end i’m always hardcoding it by myself and seems like i’m always on the lucky path with this turn..
            What I’m trying to say is that i’ll never get tired of trying out new tools to better up my skills and workflow but in this article… sadly i can’t find anything useful :/

          • Neithan

            Well, I come from the coding world and when I discovered design, I could never do one thing without the other. So I do all the design, from scratches in paper to a full detailed product, and then I code the frontend. I’d do the backend too but my parnter does that, I even though that’s my strongest suit, and it’s fun to do it.

            Personally, to design something that’s in my mind (talking website) I just use Illustrator with any prototyping shapes (there are a ton free packs out there, very useful). Just dragging and dropping things freely until it feels right, without even colors, just shapes, with UX in mind. If I feel like it (I usually do), I start coloring in Illustrator and quickly try different themes (Swatches and global colors are your friends). Check these out: http://www.designsprint.net

            If we are talking logos or other small elements, I use pen and paper for a while, and then Illustrator. Pretty much like this awesome guy https://vimeo.com/113751583

            And please, just in case you use Photoshop to do design work let me say… kill it with fire. Now. Learn a vector program well, like Illustrator, Sketch or Affinity Designer. Photoshop is for photos as its name implies. Adobe is a bit clueless at the moment so they are confusing their products and design assets/tutorials for photoshop are more common because people are dumb and they just know how to use photoshop so here we are.
            The web is vectors. Real designers work with vectors, not Mr.Raster photoshop.

            And then frontend time.

            I hope I was of help.

  • Soufiane Tra

    Thanks it’s very useful article :)