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
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
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
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
○ Revealing module pattern
● Consider using ES6 for new project ;-)
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. 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. 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. 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. ● 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. 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. ● 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. ● 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. ● 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. Grunt
The JavaScript Task Runner
● Configuration…
● Lots of plugins
● Operates on files
● But…
○ Seems like not updated lately
○ Community shifted to gulp
31. Automate and enhance your workflow
● Gulp is the new grunt
● Active community
● Simple configuration
● Organized around streams
● Faster & less config
gulp.js
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. npm
● Install package
○ npm install jshint --save-dev
● Configure
○ package.json
● Run
○ npm run script name
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. Getting started
Take something as your starting point:
● Web Starter Kit from Google
● HTML5 Boilerplate
● Bootstrap
● yeoman generator
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. HTML5 Boilerplate
The web’s most popular front-end template
● HTML Page Structure
● Normalize.css
● Modernizr.js
● jQuery from CDN with local fallback
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. ● 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. 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. ● 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. ● 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. ● 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. ● 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
52. jQuery
● Site enhancements
○ sliders
○ galleries
○ AJAX
○ not much business logic
● DOM manipulation
● Simple custom event system
● Form validation
○ parsley.js
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. 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. Backbone.js
● Simple structure for web application
○ Models, Collections, Views, Routers
○ Less abstraction
○ Simple, still popula
● http://addyosmani.github.io/backbone-fundamentals/
56. Angular
● The “enterprise” frameworks
● Most popular kinda MVC framework
● Easy 2 way binding
● Performance issues
● Angular 2 on the way
57. React
● Library from Facebook
● High performance
○ Virtual DOM
● Organized around components & state
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. 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/