Architektura html, css i javascript - Jan Kraus

HTML, CSS & Javascript
Architecture
In a little bit bigger projects…

Jan Kraus
senior 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
"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",
"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/

Architektura html, css i javascript - Jan Kraus

More Related Content

What's hot (20)

Viewers also liked (9)

Similar to Architektura html, css i javascript - Jan Kraus (20)

More from Women in Technology Poland (20)

Recently uploaded (20)

Architektura html, css i javascript - Jan Kraus