View
477
Download
0
Category
Preview:
Citation preview
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!
Recommended