Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

1.169 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Is it possible to improve your memory? How can I improve my memory recall? more info... ♣♣♣ https://tinyurl.com/brainpill101
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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!

×