HTML, CSS & JavascriptArchitectureIn a little bit bigger projects…

Jan Kraussenior frontend dev / creativestyle

Part 1:

● Introduction● Coding guidelines● Servers● Tools & automatization● Starter templates● Responsive web design

Schedule

Part 2:

● Git & team work● Frameworks & libraries● Modular CSS: SMACSS, BEM● Javascript patterns● Coding challenge, Q&A

A bigger project

● More than one frontend developer○ sometimes more than 1 team

● Multiple & different page types● Long term development goal● Responsive● Pure frontend or framework based solution

Architecture

● Technology stack (frameworks)● Code organization● Coding guidelines● RWD

○ fluid vs. adaptive○ Mobile first vs. desktop first

● Icons system / images● Performance● Workflow

Technology stack

● Backend frameworks○ Rails

■ assets pipeline○ Symfony

■ assetic○ Node.js,

■ Express, Meteor, Sails

● Frontend frameworks○ jQuery, Bootstrap,○ Backbone○ Angular, Ember, React

● Maintain simple & clean structure for your code○ keep your code separated in assets folders

■ javascripts■ css / sass■ images■ fonts■ other stuff

● look for best practices for your framework● organize in modules instead by type

Code organization

● don’t mix spaces & tabs○ I suggest to configure your editor to indent everything with 2 spaces○ but this is never ending war ;-)○ use good code editor

■ webstorm / phpstorm is quite powerful

● maintain clean & usable code○ comment well○ keep good variable names○ use consistent naming convention

● UTF-8 everywhere○ <div class="♫">

Coding guidelines

HTML guidelines

● keep the code well formatted● use html5 doctype

○ occasionally check it with W3C validator

● keep all tags lowercase● wrap all attributes in double quotes● try to write semantic html

○ but don’t overdo with html5 semantic tags○ good reference at http://html5doctor.com/

● keep in mind accessibility○ learn about aria tags

● Keep the code well formatted● Don’t rely on using ID-selectors for styling● Use lowercase-class-names

○ Write semantic class names○ Separate with hyphens○ unless you consider using BEM / SMACSS

● Avoid long selectors○ especially watch out for nesting in sass○ learn & understand how CSS cascade works○ Avoid using !important

CSS guidelines - selectors

● Use shorthand properties○ padding: 10px 20px;

● don’t overuse -vendor-prefixes too much○ use autoprefixer○ they need to come before standard property

● try to avoid using pixel units everywhere○ learn about rems

● use #hex colors & rgba when wants opacity

CSS guidelines

CSS guidelines

● keep media-queries close to relevant sections● separate bigger sections with block comments

SASS guidelines

● avoid nesting selectors○ or try to keep it up to 2-3 levels

■ or really, avoid!

● use sass @imports to organize your css code○ start name of imported partial with underscore

■ _grid.scss, _config.scss○ organize into components, modules, shared etc..

● use variables!○ at least for colors & media-query breakpoints

Javascript guidelines

● Keep the code well formatted● Make sure you understand basics concepts of Javascript● Use single quotes for strings● Always use expanded blocks syntax

○ if (condition) { }

● Use semicolons;● var camelCase your variable & function names● ModuleNames should start from capital letter

Javascript guidelines

● Use JSHint or ESLint to catch your errors● Learn couple useful module patterns

○ jQuery plugin○ Revealing module pattern

● Consider using ES6 for new project ;-)

jQuery guidelines

● Don’t abuse $(selector)○ remember to cache references to object○ keep prefix of your variable with $ to indicate its a jquery object

■ eg. $container = $('.container');

● Consider using custom class as hooks for your events○ $('.js-button-submit')

● When binding events, preffer using .on()○ Avoid anonymous functions for debugging○ Use custom namespace for events○ Use delegation

jQuery guidelines

● don’t put everything in $.ready function● use $.ajax instead of $.get, $.post methods● use Promise syntax for handling responses

○ $.ajax({ … })■ .done(successHandler)■ .fail(errorHandler)

● don’t use jQuery animations● avoid CSS changes via jQuery

○ prefer class toggling

jQuery guidelines

● use jquery 2.x○ unless IE8

● load it from external CDN for caching benefits● don’t use too many jQuery plugins

○ check size○ check github page for issues

● think twice before using jQuery UI● bootstrap JS relies on jquery

jQuery example

// IIFE - Immediately Invoked Function Expression(function($, window, document) { // The $ is now locally scoped

// Listen for the jQuery ready event on the document $(function() { // The DOM is ready! });

// The rest of the code goes here!

}(window.jQuery, window, document));// The global jQuery object is passed as a parameter

● Working with file:// protocol is unreliable. ● Use web server

○ Apache2○ PHP○ Node.js○ Ruby/Python

● Vagrant● MAMP / WAMP

○ I don’t recommend

Serving files locally

Apache2

● Most popular server● Already available in Mac OS X & Ubuntu

○ Need little bit of tweaking, config breaks after update

● I guess also possible on Windows…● Need to setup virtual hosts if you have multiple sites

○ I prefer to do this anyway

● Easy to use● Available from PHP 5.4

○ Available in OS X (5.6), Easy to install on Ubuntu (5.5)■ apt-get install php5

○ I guess also possible on windows…

● php -S localhost:8080

PHP built-in server

● Useful when you’re building Webapp / SPA● Just one gulp plugin

○ npm install --save-dev gulp-connect

● Not so easy for dynamic templates

gulp.task('server', function() {

connect.server();

});

Node.js / gulp-connect

● Full OS using virtualization● Every developer have the same environment● Powerful configuration

○ You can keep that in git○ Requires some knowledge

● Useful for framework setup with lots of dependencies● Slow and problematic on windows

Vagrant

Automatization

● Compile & minify SASS● Concatenate / minify javascript files● Optimize images● Generate sprites● Code linting● Autoreload● Deployments

Task runners

There are many ways to do it

● Grunt● Gulp● node.js● Shell

Grunt

The JavaScript Task Runner

● Configuration…● Lots of plugins ● Operates on files● But…

○ Seems like not updated lately○ Community shifted to gulp

● Install grunt CLI○ npm install -g grunt-cli

● Install local plugins○ npm install grunt-contrib-uglify --save-dev

● Configure○ Gruntfile.js

● Run: ○ grunt

Grunt

Grunt - package.json

{

"name": "my-project-name",

"version": "0.1.0",

"devDependencies": {

"grunt": "~0.4.5",

"grunt-contrib-uglify": "~0.5.0"

}

}

module.exports = function(grunt) {

grunt.initConfig({

uglify: {

build: {

files: [{

cwd: 'src/js',

src: '**/*.js',

dest: 'build/bundle.min.js'

}]

}

}

});

grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.registerTask('default', ['uglify']);

};

Grunt - Gruntfile.js

Automate and enhance your workflow

● Gulp is the new grunt● Active community● Simple configuration● Organized around streams● Faster & less config

gulp.js

gulp.js

● Install gulp○ npm install --global gulp○ npm install --save-dev gulp

● Install plugins○ npm install --save-dev gulp-uglify

● Configure○ gulpfile.js

● Run:○ gulp

gulp - gulpfile.js

var gulp = require('gulp');

var uglify = require('gulp-uglify');

gulp.task('uglify', function() {

return gulp.src(src/**/*.js')

.pipe(uglify())

.pipe(gulp.dest('dist'));

});

gulp.task('default', ['uglify']);

npm & node.js packages

npm is the package manager for node.js

● pure node.js packages● simple setup, without much of configuration● easy to maintain

npm

● Install package○ npm install jshint --save-dev

● Configure○ package.json

● Run○ npm run script name

npm - package.json

"devDependencies": {

"jshint": "latest",

},

"scripts": {

"lint": "jshint **.js"

}

A package manager for the web

● manage & download external dependencies● fetch and update frontend libraries

Bower

● Install bower○ npm install -g bower

● Configure○ .bowerrc

■ {"directory": "assets/vendors/"}

● Install○ bower install jquery --save-dev

Bower

{

"name": "Sample Project",

"devDependencies": {

"jquery": "~2.1.4"

}

}

Bower - bower.json

Semantic versioning

Semantic versioning: MAJOR.MINOR.PATCH

● Patch releases: 1.0 or 1.0.x or ~1.0.4● Minor releases: 1 or 1.x or ^1.0.4● Major releases: * or x

Getting started

Take something as your starting point:

● Web Starter Kit from Google● HTML5 Boilerplate● Bootstrap● yeoman generator

Web Starter Kit is an easy way to start a new project.

● build process, ● boilerplate HTML ● styles (material design)

Web Starter Kit from Google

HTML5 Boilerplate

The web’s most popular front-end template

● HTML Page Structure● Normalize.css● Modernizr.js● jQuery from CDN with local fallback

Bootstrap from Twitter

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

● Not really a boilerplate● But you can use basic template● http://getbootstrap.com/getting-started/#template

● Start using git if you haven’t already started○ Github - free for open source projects○ Bitbucket - unlimited private repositories, limited users○ Gitlab - self hosted github UI clone

Git

Git - commits convention

[FEATURE] Implements lazy loading for products carousel (max 70 chars)

Adds JS module to loads products for carousel using AJAX triggered after document

ready. Implementation is using sttic JSON as example.

- JS module to load products

- CSS for loading animation

- Example of JSON for products

Ref: JIRA-1392

● Basic○ only dev / master

● Feature branches○ use pull / merge requests for code review

● Gitflow○ when working on multiple releases & feature branches

Git - Branching model

● git status○ read what’s there ;-)

● git reset○ git reset○ git reset head --hard○ git reset origin/master --force

● git revert○ git revert commit-sha○ creates new commit

Git - Command line

● git cherry-pick○ git cherry-pick commit-sha○ creates new commit

● git rebase○ git rebase -i head~2○ is rewriting history

● git merge○ git merge your-branch-name○ resolve conflicts correctly

Git - Command line

● git pull○ git fetch origin + git merge○ git pull --rebase

■ create cleaner history

● git stash○ git stash○ git stash pop

● git log○ git lg ○ git lg | grep JIRA-1234

Git - Command line

● Libs○ jQuery○ Bootstrap○ Modernizr

● Frameworks○ Backbone○ Angular, Angular2○ Ember○ React

Framework & tools

jQuery

● Site enhancements○ sliders○ galleries○ AJAX○ not much business logic

● DOM manipulation● Simple custom event system● Form validation

○ parsley.js

Bootstrap

● UI library for the web● SCSS / Less components

○ Include only what you need with sass imports○ You can use SASS @extend

● Same for JS○ you can include only what you need

● Useful○ grid○ forms○ modal

Modernizr

● Feature detection for browsers○ append CSS classes to html○ Modernizr JS object for testing properties

● Generate custom build● Does not have to be included in the head

Backbone.js

● Simple structure for web application○ Models, Collections, Views, Routers○ Less abstraction○ Simple, still popula

● http://addyosmani.github.io/backbone-fundamentals/

Angular

● The “enterprise” frameworks● Most popular kinda MVC framework● Easy 2 way binding● Performance issues● Angular 2 on the way

React

● Library from Facebook● High performance

○ Virtual DOM

● Organized around components & state

Useful libraries

● Moment.js● History.js● Respond.js

○ not really usefull

● Typeahead● Parsley.js

RWD - Responsive web design

● Mobile first approach● Stop thinking in pixels

○ Multiple devices, screens, widths...

● Progressive enhancement / graceful degradation● SVG & retina images● Build your site with performance in mind● Read often:

○ http://www.smashingmagazine.com/○ https://css-tricks.com/

Modular CSS

● Reusable components● Naming convention for CSS classes

○ SMACSS○ BEM○ OOCSS

Scalable & Modular Architecture for CSS

● Simple naming conventions● Architecture & patterns for organizing rules● Free book:

○ https://smacss.com/book/

SMACSS

BEM

BEM – Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end

● Naming conventions● Independent modular blocks● Flexible and allows for customization●

BEM

Learn more about BEM:

● http://getbem.com/● https://css-tricks.com/bem-101/● http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-

bem-syntax/● http://www.smashingmagazine.com/2012/04/a-new-front-end-

methodology-bem/

Thank you!