O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Architektura html, css i javascript - Jan Kraus

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio

Confira estes a seguir

1 de 64 Anúncio

Architektura html, css i javascript - Jan Kraus

Baixar para ler offline

W prezentacji znajdziesz omówienie:
-organizację kodu i pracy w trochę większych projektach
-wykorzystanie narzędzi takich jak npm, gulp, sass, bower do automatyzacji zadań
-efektywną pracę w zespole z wykorzystaniem gita
-zasady tworzenia zwartego, łatwego w utrzymaniu kodu w oparciu o podejście SMACSS i BEM
-wzorce i podejście do tworzenia modularnego javascriptu
-przydatne narzędzia i biblioteki wraz z ich praktycznym zastosowaniem
-testowanie stron i aplikacji
-przyjrzymy się też nowej wersji Javascript: ES6/ES2015

W prezentacji znajdziesz omówienie:
-organizację kodu i pracy w trochę większych projektach
-wykorzystanie narzędzi takich jak npm, gulp, sass, bower do automatyzacji zadań
-efektywną pracę w zespole z wykorzystaniem gita
-zasady tworzenia zwartego, łatwego w utrzymaniu kodu w oparciu o podejście SMACSS i BEM
-wzorce i podejście do tworzenia modularnego javascriptu
-przydatne narzędzia i biblioteki wraz z ich praktycznym zastosowaniem
-testowanie stron i aplikacji
-przyjrzymy się też nowej wersji Javascript: ES6/ES2015

Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Anúncio

Semelhante a Architektura html, css i javascript - Jan Kraus (20)

Mais de Women in Technology Poland (20)

Anúncio

Mais recentes (20)

Architektura html, css i javascript - Jan Kraus

  1. 1. HTML, CSS & Javascript Architecture In a little bit bigger projects…
  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
  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 ○ Revealing module pattern ● Consider using ES6 for new project ;-)
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. ● 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
  21. 21. 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
  22. 22. ● 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
  23. 23. ● 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
  24. 24. ● 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
  25. 25. Automatization ● Compile & minify SASS ● Concatenate / minify javascript files ● Optimize images ● Generate sprites ● Code linting ● Autoreload ● Deployments
  26. 26. Task runners There are many ways to do it ● Grunt ● Gulp ● node.js ● Shell
  27. 27. Grunt The JavaScript Task Runner ● Configuration… ● Lots of plugins ● Operates on files ● But… ○ Seems like not updated lately ○ Community shifted to gulp
  28. 28. ● Install grunt CLI ○ npm install -g grunt-cli ● Install local plugins ○ npm install grunt-contrib-uglify --save-dev ● Configure ○ Gruntfile.js ● Run: ○ grunt Grunt
  29. 29. Grunt - package.json { "name": "my-project-name", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.5", "grunt-contrib-uglify": "~0.5.0" } }
  30. 30. 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
  31. 31. Automate and enhance your workflow ● Gulp is the new grunt ● Active community ● Simple configuration ● Organized around streams ● Faster & less config gulp.js
  32. 32. 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
  33. 33. 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']);
  34. 34. 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
  35. 35. npm ● Install package ○ npm install jshint --save-dev ● Configure ○ package.json ● Run ○ npm run script name
  36. 36. npm - package.json "devDependencies": { "jshint": "latest", }, "scripts": { "lint": "jshint **.js" }
  37. 37. A package manager for the web ● manage & download external dependencies ● fetch and update frontend libraries Bower
  38. 38. ● Install bower ○ npm install -g bower ● Configure ○ .bowerrc ■ {"directory": "assets/vendors/"} ● Install ○ bower install jquery --save-dev Bower
  39. 39. { "name": "Sample Project", "devDependencies": { "jquery": "~2.1.4" } } Bower - bower.json
  40. 40. 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
  41. 41. Getting started Take something as your starting point: ● Web Starter Kit from Google ● HTML5 Boilerplate ● Bootstrap ● yeoman generator
  42. 42. Web Starter Kit is an easy way to start a new project. ● build process, ● boilerplate HTML ● styles (material design) Web Starter Kit from Google
  43. 43. HTML5 Boilerplate The web’s most popular front-end template ● HTML Page Structure ● Normalize.css ● Modernizr.js ● jQuery from CDN with local fallback
  44. 44. 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
  45. 45. ● 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
  46. 46. 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
  47. 47. ● Basic ○ only dev / master ● Feature branches ○ use pull / merge requests for code review ● Gitflow ○ when working on multiple releases & feature branches Git - Branching model
  48. 48. ● 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
  49. 49. ● 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
  50. 50. ● 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
  51. 51. ● Libs ○ jQuery ○ Bootstrap ○ Modernizr ● Frameworks ○ Backbone ○ Angular, Angular2 ○ Ember ○ React Framework & tools
  52. 52. jQuery ● Site enhancements ○ sliders ○ galleries ○ AJAX ○ not much business logic ● DOM manipulation ● Simple custom event system ● Form validation ○ parsley.js
  53. 53. 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
  54. 54. 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
  55. 55. Backbone.js ● Simple structure for web application ○ Models, Collections, Views, Routers ○ Less abstraction ○ Simple, still popula ● http://addyosmani.github.io/backbone-fundamentals/
  56. 56. Angular ● The “enterprise” frameworks ● Most popular kinda MVC framework ● Easy 2 way binding ● Performance issues ● Angular 2 on the way
  57. 57. React ● Library from Facebook ● High performance ○ Virtual DOM ● Organized around components & state
  58. 58. Useful libraries ● Moment.js ● History.js ● Respond.js ○ not really usefull ● Typeahead ● Parsley.js
  59. 59. 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/
  60. 60. Modular CSS ● Reusable components ● Naming convention for CSS classes ○ SMACSS ○ BEM ○ OOCSS
  61. 61. Scalable & Modular Architecture for CSS ● Simple naming conventions ● Architecture & patterns for organizing rules ● Free book: ○ https://smacss.com/book/ SMACSS
  62. 62. 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 ●
  63. 63. 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/
  64. 64. Thank you!

×