The State of Modern Web Development Technologies: An Introduction

Strap yourselves in!

Michael Ahearn MACS CP (October 2015)

Source: http://blog.xebia.com/2014/06/06/state-of-web-development-2014/

The new “full stack”

Source: http://www.100percentjs.com/visualizing-modern-web-development-stack/

Too many choices!!!There are so many tools, libraries and frameworks

for modern web development out there now. I've made my decisions on what to talk about here based on:

Popularity Peer/community support Proven and trusted What I know and have worked with What job agencies are looking for

What I'll be covering

Presentation technologies – html and css tools and frameworks

Client-side MVC frameworks Server-side frameworks Workflow and efficiency tools and frameworks Code editors (if there's time)

Presentation technologies

HTML layout frameworks: Bootstrap and Foundation

CSS precompilers: Less / Sass

Templating libraries: e.g. Handlebars

Bootstrap or Foundation? “Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects on the web.” Source: http://getbootstrap.com

Foundation say it is “the most advanced responsive front-end framework in the world.” Source: http://foundation.zurb.com/

Very hard to compare them. Both use grid system. Foundation seems to be easier to customise, but Bootstrap seems to be a bit more popular.

CSS PreprocessorsLESS (less css): http://lesscss.org/LESS extends CSS with dynamic behaviour such as variables, mixins, operations and

functions. LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).

SASS (Syntactically Awesome Stylesheets): http://sass-lang.com/

$serif-font-stack: "Georgia", "Times New Roman", serif

$monospace-font-stack: "Cousin", "Courier"

body

font: normal 18px/22px $serif-font-stack

pre, code

font: 600 bold 18px/22px $monospace-font-stack

Templating toolsHandlebars example: Source: http://jsfiddle.net/aybalasubramanian/N2b5M/1/<script id="some-template" type="text/x-handlebars-template">

<tbody>

{{#users}}

<tr><td>{{fullName person}}</td>

<td>{{jobTitle}}</td>

<td><a href="https://twitter.com/{{twitter}}">@{{twitter}}</a></td>

</tr>

{{/users}}

</tbody>

</script>

Client-side MVC frameworks

Backbone.js http://backbonejs.org/

Angular.js https://angularjs.org/ (Google)

Ember.js http://emberjs.com/

Some Angular.js concepts

Directives: (e.g. ngApp, ngController, ngModel, ngRepeat)

The scope object ($scope) Two-way data binding Dependency injection

Server-side Node.js: http://nodejs.org

Express.js: http://expressjs.com/

MongoDB: https://www.mongodb.org/https://docs.mongodb.org/manual/core/introduction/

Tools for efficiency npm (Node package manager). With node installed, can

run npm at the command line to fetch available packages from repositories such as github and other remote servers https://docs.npmjs.com/

Bower: like npm but for the client-side http://bower.io/

Require.js: a JavaScript module loader http://requirejs.org/

Grunt: the JavaScript task runner http://gruntjs.com/

npmOnce you have node installed, you can now use the

Node package manager to install other software. $ npm install -g bower

This fetches & installs the package bower.js, globally.

If you issue this command from inside your project root folder:

$ npm install express

express.js will be installed in a folder called node_modules

There are many options you can use with the npm command

Bower

Works similar to npm, but you can use it for packages you use on the client, such as jquery, angular, underscore, handlebars etc.

From your project root folder, if you issue the command:

$ bower install jquery

Bower will fetch & install jquery.js inside a folder called bower_components

Require.jsFirstly a preamble to why we use require.js: JavaScript modules and AMD (asynchronous

module definition).Modules are packages of code. Require.js is a

tool used to load these modules in the sequence in which we need them in our app.

Get it at: http://requirejs.org/

Why require.js?

The Problem: Web sites are turning into Web apps Code complexity grows as the site gets bigger Assembly gets harder Developer wants discrete JS files/modules Deployment wants optimized code in just one or

a few HTTP calls

Why require.js?

The Solution: Some sort of #include/import/require ability to load nested dependencies ease of use for developer but then backed by an

optimization tool that helps deployment

Source: http://requirejs.org/docs/why.html

Grunt.js

Grunt is defined as a “task runner”.

Basically, it can automate all the tasks you routinely do with all projects, in order to deploy your app, e.g.:

Convert less or sass files to css Convert CoffeeScript or TypeScript to js Run jshint on your JavaScript Run tests Minify and concatenate JS code – reducing the number

of script tags in the html

CoffeeScript:http://coffeescript.org/

TypeScript: (Microsoft – but open-source)http://www.typescriptlang.org/

Code Editors Sublime text ($70 US) Adobe Brackets (open source) Github Atom (open source) Microsoft Visual Studio

BracketsPros: Free, open-source, cross platform Clean, modern UI. Ability to split panes Live preview (big bonus!) Lots of plugins to expand it's capabilities “Expand” plugin allows you to work with PSD files (it is

made by Adobe after all!)

Cons: Tabs on the left rather than top (not that important)

Atom

https://atom.io/Pros: Free, open source (MIT license), cross-platform Hackable, customisable (big community involvement) Multiple selections, cursors (huge efficiency) Integration with Github

Resources

Stackoverflow: (where you get answers to any dev question, from the experts, and it's fully peer-rated – evidence-based)

JavaScript Weekly: http://javascriptweekly.com/

Ng Newsletter:http://www.ng-newsletter.com/posts/