in Web Development

Full Stack Frontend catchup & workflow

I have come to the realisation recently I’m more of a full stack developer. Taking some time recently to run through the recent developments in frontend if you haven’t explored this area for a while you will find it’s moved on quite a bit.

What you need to know:

Get familiar with npm and node-js because you will be using them a lot, of course it isn’t the only package manager out there and more for frontend dev’s is bower the debate is still out on which is best. If you want a good explanation of both see this Stackoverflow answer what’s the difference between node-js and bower? you can of course use the tools together.

Just like composer for php and other languages that now user composer type tools these help you manage your dependencies.

Along with these you can use further bundled packages that in their own way try to speed up development e.g INIT and Yeoman. INIT bundles together HTML5 Boilerplate, Bower and Grunt and some other things to give you a head start there are many others out there. Yeoman sort of serves as library manager for installing these, all of the above act like a scaffolding for a new project.

If you’ve barely touched Grunt , you would be better starting off writing your own Grunt config and learning about how underlying tools work you would be surprised how easy it is.

There’s also Gulp which is very similar to Grunt it’s good to give both a try as different agencies may have a preference. What they allow you to do is pull off some impressive automation into your development for example maintaining a /build folder structure from the same source dir and having different process’s, files, settings etc for each e.g a testing scenario vs a live build. Some common tasks like css/js compression, whitespace removal, concatenating a bunch of files together basically giving you a squeaky clean page structure which can be run every time you make changes to your project through a one line command.

But the really clever stuff is automating things like changing your URL’s to a CDN , compressing images, minifying html etc.. Roll in automated testing, compiling sass, less, copying files, compiling html and even run other command line tools.

There’s still some lively debate about which is best, but they both have good support and achieve the same outcome only currently gulp has some performance advantages that I think only apply to large projects, so as always it may be a decision based on the project.

What else is current:

JS

Most dev’s will have worked on some project or another that used Angular, Backbone or some other MVC based framework I gave Agility.js a go last year, Angular is definitely looking pretty strong and backed by Google it’s likely to grow further it’s pretty popular in job listings as well.

ECMAScript was released this month (June 17th 2015) what it brings to JS is classes and a ton of other features see http://es6-features.org/ or there’s a good overview of the main changes with some examples here or view the full spec you don’t have to wait till it’s safe to use it, there are many compilers (Babeljs) that offer backward compatibility allowing you to use it today.

CSS/HTML

There’s still plenty of frameworks popping up with Bootstrap, Foundation, Semantic UI, Pure, Inuit, UI Kit all serve different needs some more basic than others, my framework of choice for frontend websites is Foundation as the name suggests it feels solid and seems to offer just the right balance of components but not feeling too bloated.

By now your very familiar with transitions, drop-shadows and all that CSS3 brought, CSS4 is on the horizon it’s still a working draft so it’s not worth spending more than a glance on what it might have to offer at this stage as you would still have to polyfill some of CSS3’s features for older browsers.

Mostly pain free features that you could be using:

  • SVG with IE8 Polyfill (npm install grunt-badass –save-dev)
  • vh/vw useful for fullscreen layouts (https://github.com/saabi/vminpoly)
  • Semantic markup (that’s a given by now)
  • HTML5 form (mostly ok IE9 lacks support without polyfill)

Here’s a set up for a small mainly static project I recently developed:

Technology Stack

  • Nginx
  • PHP5-FPM
  • Rackspace Load Balancer
  • Lsyncd
  • MySQL
  • Cloudflare
  • Modernizr
  • Angular JS
  • Foundation 5
  • JQuery
  • Typekit

Folder Structure

  • /project/app
  • /project/app/api
  • /project/app/assets
  • /project/app/assets/css
  • /project/app/assets/fonts
  • /project/app/assets/img
  • /project/app/assets/js
  • /project/app/views
  • /project/app/views/partials
  • /project/src
  • /project/src/js
  • /project/src/img
  • /project/src/sass

Development Tools

  • Phpstorm
  • Browserstack
  • New Relic
  • Blitz.io
  • Virtual Box
  • Ampps
  • LiveReload

gitignore

node_modules
.npm-debug.log
tmp
bower_components
.sass-cache

Grunt build tasks

grunt.registerTask('build', ['clean', 'jshint', 'sass', 'concat', 'cssmin', 'copy','uglify','htmlmin', 'cdnify', 'svgmin'])
grunt.registerTask('test', ['jshint', 'sass', 'concat', 'copy','uglify']

The benefit or running all this stuff can be seen by putting your site through Pagespeed Insights it can become an obsession to get the highest score possible but at the end the speed is worth it.

There are some caveats:

  • IE8/9 can only read a maximum of around 280kb in file size or 4096 rules so putting everything into one file might not be possible at least that’s true for CSS files
  • If your using concat and pre-minifed versions of your JS dependencies make sure to use the separator option to prevent errors
    separator: ';\n',
  • Crushing everything into one file might not be the best for your project, as if everything is efficiently structured, you can utilise the browsers connections better by splitting them into a few files e.g app.js, index.js etc.. furthermore you can use things like https://github.com/ocombe/ocLazyLoad or RequireJS to load files as you need them. But ideally if you can achieve a small file size and one file that’s the goal
  • Angular JS does not support IE8
  • SVG not supported in IE8
  • Using the html5mode in Angular did not work for me in iOS safari and other browser versions when loading a subpage.
    $locationProvider.html5Mode(true);

 

Write a Comment

Comment