Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

HTML, CSS & Javascript Architecture (extended version) - Jan Kraus

1.174 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Is it possible to improve your memory? How can I improve my memory recall? more info... ♣♣♣ https://tinyurl.com/brainpill101
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

HTML, CSS & Javascript Architecture (extended version) - Jan Kraus

  1. 1. HTML, CSS & Javascript Architecture In a little bit bigger projects… v2
  2. 2. Jan Kraus senior frontend dev / creativestyle
  3. 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. 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. 5. Architecture ● Technology stack (frameworks) ● Code organization ● Coding guidelines ● RWD ○ fluid vs. adaptive ○ Mobile first vs. desktop first ● Icons system / images ● Performance ● Workflow
  6. 6. Technology stack ● Backend frameworks ○ Rails ■ assets pipeline ○ Symfony ■ assetic ○ Node.js, ■ Express, Meteor, Sails ● Frontend frameworks ○ jQuery, Bootstrap, ○ Backbone ○ Angular, Ember, React
  7. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 27. Automatization ● Compile & minify SASS ● Concatenate / minify javascript files ● Optimize images ● Generate sprites ● Code linting ● Autoreload ● Deployments
  28. 28. Task runners There are many ways to do it ● Grunt ● Gulp ● node.js ● Shell
  29. 29. Grunt The JavaScript Task Runner ● Configuration… ● Lots of plugins ● Operates on files ● But… ○ Seems like not updated lately ○ Community shifted to gulp
  30. 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. 31. Grunt - package.json { "name": "my-project-name", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.5", "grunt-contrib-uglify": "~0.5.0" } }
  32. 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. 33. Automate and enhance your workflow ● Gulp is the new grunt ● Active community ● Simple configuration ● Organized around streams ● Faster & less config gulp.js
  34. 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. 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. 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. 37. npm ● Install package ○ npm install jshint --save-dev ● Configure ○ package.json ● Run ○ npm run script name
  38. 38. npm - package.json "devDependencies": { "jshint": "latest", }, "scripts": { "lint": "jshint **.js" }
  39. 39. A package manager for the web ● manage & download external dependencies ● fetch and update frontend libraries Bower
  40. 40. ● Install bower ○ npm install -g bower ● Configure ○ .bowerrc ■ {"directory": "assets/vendors/"} ● Install ○ bower install jquery --save-dev Bower
  41. 41. { "name": "Sample Project", "devDependencies": { "jquery": "~2.1.4" } } Bower - bower.json
  42. 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. 43. Getting started Take something as your starting point: ● Web Starter Kit from Google ● HTML5 Boilerplate ● Bootstrap ● yeoman generator
  44. 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. 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. 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. 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. 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. 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. 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. 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. 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. 53. ● Libs ○ jQuery ○ Bootstrap ○ Modernizr ● Frameworks ○ Backbone ○ Angular, Angular2 ○ Ember ○ React Framework & tools
  54. 54. jQuery ● Site enhancements ○ sliders ○ galleries ○ AJAX ○ not much business logic ● DOM manipulation ● Simple custom event system ● Form validation ○ parsley.js
  55. 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. 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. 57. Backbone.js ● Simple structure for web application ○ Models, Collections, Views, Routers ○ Less abstraction ○ Simple, still popula ● http://addyosmani.github.io/backbone-fundamentals/
  58. 58. Angular ● The “enterprise” frameworks ● Most popular kinda MVC framework ● Easy 2 way binding ● Performance issues ● Angular 2 on the way
  59. 59. React ● Library from Facebook ● High performance ○ Virtual DOM ● Organized around components & state
  60. 60. Useful libraries ● Moment.js ● History.js ● Respond.js ○ not really usefull ● Typeahead ● Parsley.js
  61. 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. 62. Modular CSS ● Reusable components ● Naming convention for CSS classes ○ SMACSS ○ BEM ○ OOCSS
  63. 63. Scalable & Modular Architecture for CSS ● Simple naming conventions ● Architecture & patterns for organizing rules ● Free book: ○ https://smacss.com/book/ SMACSS
  64. 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. 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. 66. BEM - Example .block {} .block__element {} .block--modifier {} // example of search for .site-search {} /* Block */ .site-search__field {} /* Element */ .site-search--full {} /* Modifier */
  67. 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. 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. 69. Thank you!

×