HTML, CSS & Javascript Architecture (extended version) - Jan Kraus
4 likes•2,139 views
This document discusses best practices for organizing code and setting up architecture for larger frontend projects with multiple developers. It covers choosing technology stacks, code organization, coding guidelines, responsive design approaches, performance optimization, and workflows.
![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 );](https://image.slidesharecdn.com/architekturahtmlcssijavascript2-151127120821-lva1-app6892/85/HTML-CSS-Javascript-Architecture-extended-version-Jan-Kraus-18-320.jpg)
![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](https://image.slidesharecdn.com/architekturahtmlcssijavascript2-151127120821-lva1-app6892/85/HTML-CSS-Javascript-Architecture-extended-version-Jan-Kraus-32-320.jpg)
![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']);](https://image.slidesharecdn.com/architekturahtmlcssijavascript2-151127120821-lva1-app6892/85/HTML-CSS-Javascript-Architecture-extended-version-Jan-Kraus-35-320.jpg)
![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](https://image.slidesharecdn.com/architekturahtmlcssijavascript2-151127120821-lva1-app6892/85/HTML-CSS-Javascript-Architecture-extended-version-Jan-Kraus-48-320.jpg)
HTML, CSS & Javascript Architecture (extended version) - Jan Kraus
- 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!