(extended version) Architektura html, css i javascript (wersja rozszerzona)

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

2. Jan Kraus
senior frontend dev / creativestyle

3. 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

4. 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

5. Architecture
● Technology stack (frameworks)
● Code organization
● Coding guidelines
● RWD
○ fluid vs. adaptive
○ Mobile first vs. desktop first
● Icons system / images
● Performance
● Workflow

6. Technology stack
● Backend frameworks
○ Rails
■ assets pipeline
○ Symfony
■ assetic
○ Node.js,
■ Express, Meteor, Sails
● Frontend frameworks
○ jQuery, Bootstrap,
○ Backbone
○ Angular, Ember, React

7. ● 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

8. ● 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

9. 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

10. ● 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

11. ● 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

12. CSS guidelines
● keep media-queries close to relevant sections
● separate bigger sections with block comments
● organize code into meaningful sections
○ don’t write everything in the bottom
○ find the “right place”

13. 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

14. 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

15. Javascript guidelines
● use JSHint or ESLint to catch your errors
● learn couple useful module patterns
○ jQuery plugin
○ http://addyosmani.com/resources/essentialjsdesignpatterns/book/
○ http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html
● learn about ES6

16. 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

17. Revealing module pattern
var MyModule = (function(window, undefined) {
var myState = 0;
function initialize() {
console.log('Module initialized...');
}
function setState(data) {
state = data;
}
return {
init: initialize,
someOtherMethod: myOtherMethod
};
})(window);
MyModule.init(); // logs “Module initialized…”
MyModule.setState(3);

18. jQuery plugin
;(function ( $, window, document, undefined ) {
var pluginName = "myPluginName",
defaults = {
propertyName: "value"
};
// The actual plugin constructor
function Plugin( element, options ) {
this.element = element;
this.options = $.extend( {}, defaults, options) ;
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype.init = function () {
// Place initialization logic here
};
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if ( !$.data(this, "plugin_" + pluginName )) {
$.data( this, "plugin_" + pluginName,
new Plugin( this, options ));
}
});
}
})( jQuery, window, document );

19. 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

20. 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

21. 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
● http://gregfranko.com/jquery-best-practices/

22. ● 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

23. 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

24. ● 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

25. ● 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

26. ● 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

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

28. Task runners
There are many ways to do it
● Grunt
● Gulp
● node.js
● Shell

29. Grunt
The JavaScript Task Runner
● Configuration…
● Lots of plugins
● Operates on files
● But…
○ Seems like not updated lately
○ Community shifted to gulp

30. ● Install grunt CLI
○ npm install -g grunt-cli
● Install local plugins
○ npm install grunt-contrib-uglify --save-dev
● Configure
○ Gruntfile.js
● Run:
○ grunt
Grunt

31. Grunt - package.json
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-uglify": "~0.5.0"
}
}

32. 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

33. Automate and enhance your workflow
● Gulp is the new grunt
● Active community
● Simple configuration
● Organized around streams
● Faster & less config
gulp.js

34. 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

35. 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']);

36. 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

37. npm
● Install package
○ npm install jshint --save-dev
● Configure
○ package.json
● Run
○ npm run script name

38. npm - package.json
"devDependencies": {
"jshint": "latest",
},
"scripts": {
"lint": "jshint **.js"
}

39. A package manager for the web
● manage & download external dependencies
● fetch and update frontend libraries
Bower

40. ● Install bower
○ npm install -g bower
● Configure
○ .bowerrc
■ {"directory": "assets/vendors/"}
● Install
○ bower install jquery --save-dev
Bower

41. {
"name": "Sample Project",
"devDependencies": {
"jquery": "~2.1.4"
}
}
Bower - bower.json

42. 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

43. Getting started
Take something as your starting point:
● Web Starter Kit from Google
● HTML5 Boilerplate
● Bootstrap
● yeoman generator

44. Web Starter Kit is an easy way to start a new project.
● build process,
● boilerplate HTML
● styles (material design)
Web Starter Kit from Google

45. HTML5 Boilerplate
The web’s most popular front-end template
● HTML Page Structure
● Normalize.css
● Modernizr.js
● jQuery from CDN with local fallback

46. 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

47. ● 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

48. 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

49. ● Basic
○ only dev / master
● Feature branches
○ use pull / merge requests for code review
● Gitflow
○ when working on multiple releases & feature branches
Git - Branching model

50. ● 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

51. ● 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

52. ● 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

53. ● Libs
○ jQuery
○ Bootstrap
○ Modernizr
● Frameworks
○ Backbone
○ Angular, Angular2
○ Ember
○ React
Framework & tools

54. jQuery
● Site enhancements
○ sliders
○ galleries
○ AJAX
○ not much business logic
● DOM manipulation
● Simple custom event system
● Form validation
○ parsley.js

55. 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

56. 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

57. Backbone.js
● Simple structure for web application
○ Models, Collections, Views, Routers
○ Less abstraction
○ Simple, still popula
● http://addyosmani.github.io/backbone-fundamentals/

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

59. React
● Library from Facebook
● High performance
○ Virtual DOM
● Organized around components & state

60. Useful libraries
● Moment.js
● History.js
● Respond.js
○ not really usefull
● Typeahead
● Parsley.js

61. 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/

62. Modular CSS
● Reusable components
● Naming convention for CSS classes
○ SMACSS
○ BEM
○ OOCSS

63. Scalable & Modular Architecture for CSS
● Simple naming conventions
● Architecture & patterns for organizing rules
● Free book:
○ https://smacss.com/book/
SMACSS

64. -theme.scss
- theme/_base.scss
- theme/base/_reset.scss
- theme/base/_headings.scss
- theme/_layout.scss
- theme/layout/_masthead.scss
- theme/layout/_main.scss
- theme/layout/_footer.scss
- theme/_modules.scss
- theme/modules/_search.scss
- theme/modules/_gallery.scss
- theme/_state.scss
- theme/state/_mediaqueries.scss
SMACSS - Organization

65. 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

66. BEM - Example
.block {}
.block__element {}
.block--modifier {}
// example of search for
.site-search {} /* Block */
.site-search__field {} /* Element */
.site-search--full {} /* Modifier */

67. 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/

68. Learn more
● http://www.smashingmagazine.com/
● https://css-tricks.com/
● JS News Facebook group: https://www.facebook.
com/groups/217169631654737/
● https://www.reddit.com/r/webdev
● Newsletters:
○ http://html5weekly.com/
○ http://css-weekly.com/
○ http://javascriptweekly.com/

69. Thank you!