Web Developer Toolbox

Talk about web development tools, workflows and best practices.

Transcript

1. WEB DEVELOPER TOOLBOX TOOLS, WORKFLOWS AND BEST PRACTICES
2. CHIP Online | Mastertemplate deutsch BÉLA VARGA JAVASCRIPT DEVELOPER 2 twitter.com/netzzwerg github.com/netzzwerg codepen.io/netzzwerg
3. CHIP Online | Mastertemplate deutsch CHIP DIGITAL HUBERT BURDA MEDIA COMPANY
4. CHIP Online | Mastertemplate deutsch DIE ECMANAUTEN A GROUP OF JAVASCRIPT SPECIALISTS
5. CHIP Online | Mastertemplate deutsch MUNICHJS JAVASCRIPT USER GROUP MUNICH Munich JS
6. CHIP Online | Mastertemplate deutsch CODERDOJO MUNICH FREE CODING CLUB FOR YOUNG PEOPLE CoderDojo Munich 1
7. WHY TOOLS, FRAMEWORKS AND WORKFLOWS?
8. CHIP Online | Béla Varga Why tools and workflows? 8
9. CHIP Online | Béla Varga Why tools and workflows? 9 • Reduce Complexity • Better Maintenance • Sustainable Software Development • Process Automation • Enforces Best Practices
10. CHIP Online | Béla Varga Reduce Complexity 10 • Web has grown up after 18 years. • Huge web technology stack. • Hacks because we are working on a moving target (the web). • Web development is now a serious business. • Time to become more professional.
11. CHIP Online | Béla Varga The historical change of web development 1996 11 2014 "Best viewed with Netscape Navigator and 800x600" "The web is mobile and mobile is everywhere." JavaScript 1.0.0 ECMAScript 6 Pixel perfect design, table design Responsive web design, one-page- design, flat design, material design, parallax scrolling, interactive story telling HTML 2 HTML5 (games, sound, hardware)
12. CHIP Online | Béla Varga Historical Role of an Web Developer 12 System Developer Web Developer Web Designer Backend Developer Frontend Developer HTML5 / CSS3 Developer JavaScript Developer UI Developer UX Designer Frontend Operations Developer Operations Scrum Master Product Owner OPERATIONS DEVELOPER DESIGNER
13. CHIP Online | Béla Varga Better Maintenance 13 • Big applications are built on top of testable modules. We must bring this modular approach to the browser. • Continuous development, -integration and -deployment is only possible with the right workflow.
14. "THE ONLY THING MORE EXPENSIVE THAN WRITING SOFTWARE IS WRITING BAD SOFTWARE" ! ALAN COOPER, INTERACTION DESIGNER
15. CHIP Online | Béla Varga Long-term Investment 15 • Developers are driven by time-to- market pressure. • Fast hacking works at first, but breaks in the future. • In the long run, bad software cost more money.
16. CHIP Online | Béla Varga Workflow Automation 16 • Eliminate repetitive work. • Reduce human error. • Focus on the real problems. • Use best practices conserved in tools and frameworks. • Better performance and faster response times.
17. CHIP Online | Béla Varga Workflow Topic Overview Dependency Management Version Management A/B Testing Unit Tests Integration Tests Debugging Build System Build System Scaffolding Frameworks Task Runner Quality Management PROTOTYPING 17 DEVELOPMENT DEPLOYMENT
18. CHIP Online | Mastertemplate deutsch LEARNING RESOURCES TOOLS, WORKFLOWS AND BEST PRACTICES
19. CHIP Online | Béla Varga Learning Resources 19 • Mozilla Developer Network • WebPlatform • WHATWG HTML5 Specs • ES Discuss • Google Chrome Status • Microsoft IE Status • ECMAScript 5/6 compatibility table
20. CHIP Online | Mastertemplate deutsch PROTOTYPING TOOLS, WORKFLOWS AND BEST PRACTICES
21. "FAKE IT. TRASH IT. BUILD IT." ! BEN EHMKE, 42FLOORS
22. CHIP Online | Béla Varga Rapid and Iterative Prototyping 22 • Communicate an idea. • Gather user feedback. • Identification of mistakes and risks. • Try and learn new technologies. • Fail fast and throw away.
23. CHIP Online | Béla Varga Rapid and Iterative Prototyping 23 • Node.js (Google Chrome) • JavaScriptCore (WebKit) REPL (INTERACTIVE SHELL) • Scaffolding • Live browser reload • Cross-device synchronization LOCAL EDITING • Browser console • Live edit JS/CSS and save results (Google Chrome) IN BROWSER EDITING
24. CHIP Online | Béla Varga Rapid and Iterative Prototyping 24 • Live preview and visual feedback • Libraries included • Preprocessors included • Shareable work • Collaboration ONLINE PLAYGROUND Codepen.io with Haml, SASS, CoffeeScript and LiveScript. RequireBin with npm and browserify. TDDbin with Jasmine Unit Tesing.
25. CHIP Online | Mastertemplate deutsch SCAFFOLDING TOOLS, WORKFLOWS AND BEST PRACTICES
26. CHIP Online | Béla Varga Scaffolding 26 • Kickstart your project. • Generate the structure. • Manage dependencies. • Best practices included. • Faster development. • You should know what is inside.
27. CHIP Online | Béla Varga Scaffolding with Yeoman 27 Build System Generators Configuration Dependencies BOWER GRUNT/GULP YO
28. CHIP Online | Béla Varga Scaffolding with Yeoman 28 npm install -g grunt-cli bower npm install -g yo npm install -g generator-webapp yo webapp grunt serve bower list
29. CHIP Online | Béla Varga Scaffolding with Google Web Starter Kit 29 • Inspired by Mobile HTML5 Boilerplate and generator-gulp-webapp • Mobile-optimized HTML boilerplate. • Responsive multi-device layout. • Living component style guide. • Cross-device synchronization. • PageSpeed Insights performance reporting.
30. CHIP Online | Béla Varga 30 npm install -g gulp git clone https://github.com/google/web-starter-kit.git gulp serve npm install Scaffolding with Google Web Starter Kit
31. CHIP Online | Mastertemplate deutsch MODULES & COMPONENTS TOOLS, WORKFLOWS AND BEST PRACTICES
32. KEEP IT (F)OCUSED. KEEP IT (I)NDEPENDENT. KEEP IT (R)EUSABLE. KEEP IT (S)MALL. KEEP IT (T)ESTABLE. ! ADDY OSMANI, GOOGLE FIRST
33. CHIP Online | Béla Varga Modules and Components 33 • Decoupling Application into distinct pieces. • Loose coupling removes dependencies. • To avoid pollution of the global namespace. MODULAR APPLICATION WEB JAVASCRIPT MODULE • Object Literal Pattern • Module Pattern • AMD (Asynchronous Module Definition) • CommonJS Modules • ECMAScript 6 Modules BROWSER COMPONENT • Web Components
34. CHIP Online | Béla Varga AMD (Asynchronous Module Definition) 34 • Browser-first approach. • Asynchronous behavior. • Supports objects, function, constructors, strings, ... • Incredibly flexible. • File loader library needed (RequireJS, ...) • Package manager needed (Bower, ...) Proposal for defining modules where both the module and dependencies can be asynchronously loaded. Started in the CommonJS group but moved then.
35. CHIP Online | Béla Varga CommonJS Modules 35 Specification addresses how modules should be written in order to be interoperable among a class of module systems that can be both client and server side. • Server-first approach. • Assuming synchronous behavior. • Only supports objects as modules. • Node.js module system is based on CommonJS.
36. CHIP Online | Béla Varga ECMAScript 6 Modules (Draft) 36 • Declarative syntax with import, export. • Asynchronous Module Loader API. • Loads existing Libraries like jQuery and AMD Modules via hooks. • Use it now with ES6 Module Transpiler • AngularJS 2.0 will based on ES6 Modules.
37. CHIP Online | Béla Varga Web Components 37 • Set of definitions for encapsulated and reusable widgets. • Create Custom Elements with Templates. • Hides the component structure in the Shadow DOM. • Bundles widget resources together (HTML Imports). • Try it with Google Polymer.js or Mozilla X-Tag and Brick.
38. CHIP Online | Mastertemplate deutsch PACKAGE MANAGER TOOLS, WORKFLOWS AND BEST PRACTICES
39. CHIP Online | Béla Varga Bower Components 39 Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management. • Flat dependency tree. • Runs over git endpoints. • Holds any type of assets. • Use any type of module (AMD, CommonJS). • Helps to resolve dependencies.
40. CHIP Online | Béla Varga Package Manager 40 BOWER packages components NODE PACKAGE MANAGER npm install bower install package.json bower.json node_modules bower_components npmjs.org bower.io/search require (native) script loader (RequireJS)
41. CHIP Online | Béla Varga Node Package Manager & Browserify 41 NODE PACKAGE MANAGER The node package manager comes preinstalled with the Node.js server. ! Tip: If the registry has problems, try the npm European Proxy BROWSERIFY Browserify is a tool that allows to write Node.js style modules that compile for use in the browser. ! With this tool it is possible now to port node modules such as url, path, stream, events and http in to the browser.
42. CHIP Online | Mastertemplate deutsch DEVELOPMENT ENVIRONMENTS TOOLS, WORKFLOWS AND BEST PRACTICES
43. CHIP Online | Béla Varga Development Environments 43 • python -m SimpleHTTPServer • grunt connect (Express) • WAMP, MAMP, Fenix • Virtual Machine • Vagrant & Puppet, Chef • Docker (Linux Container LXC)
44. CHIP Online | Mastertemplate deutsch VERSION MANAGEMENT TOOLS, WORKFLOWS AND BEST PRACTICES
45. CHIP Online | Béla Varga Version Management 45 • Try git and learn, it is essential. • Start with master & develop branch. • Create an github account. • Commit early and often. • Make useful commit messages. • Use visual git tools (SourceTree)
46. CHIP Online | Béla Varga Version Management - Gitflow Workflow 46 MASTER HOTFIX RELEASE DEVELOP FEATURE 0.1 0.2 1.0
47. CHIP Online | Mastertemplate deutsch FRAMEWORKS TOOLS, WORKFLOWS AND BEST PRACTICES
48. CHIP Online | Béla Varga Web Application Frameworks 48 Backbone Angular Ember VanillaJS DOM Abstraction jQuery JS Abstraction Underscore Module Loader RequireJS Plugins Mediator Polyfills & Shims MVC Router Marionette Mediator View Manager Modules React View Data Binding Dependency Injection E2E Testing ES6 Modules Web Component Conventions Unit Testing Structure More comprehensiveness More flexibility ES6 Modules Web Component
49. CHIP Online | Mastertemplate deutsch JAVASCRIPT EDITOR & IDE TOOLS, WORKFLOWS AND BEST PRACTICES
50. CHIP Online | Béla Varga JavaScript Code Editor and IDE 50 IDE clean and functional workflow included CODE EDITOR fast editing for projects (.settings) single developer bigger teams extendable tools integrated (git, testing)
51. CHIP Online | Béla Varga JavaScript Code Editor and IDE 51 • Invest time in learning your editor. • Avoid to change the shortcuts. • Share your editor config. • Share your settings & packages (Sublime). • Activate and configure code hinting. • Use project settings with dotfiles.
52. CHIP Online | Béla Varga JavaScript Code Editor and IDE 52 • VIM (yes you should learn it) • TextMate 2 • Sublime Text 2/3 EDITOR EDITOR (WEB TEC) • Twitter Atom • Adobe Brackets IDE • NetBeans IDE • Microsoft Visual Studio 2013 • JetBrains PHP/WebStorm IDE (ONLINE) • Cloud9 IDE
53. CHIP Online | Mastertemplate deutsch BROWSER TOOLS TOOLS, WORKFLOWS AND BEST PRACTICES
54. CHIP Online | Béla Varga Browser Tools 54 • Google Chrome (Canary) DevTools • Mozilla Developer Tools • Browser Console • Plugins & Extensions • Bookmarklets
55. CHIP Online | Béla Varga Browser Tools 55 • Discover DevTools in Google Chrome • Newest features with Canary and chrome://flags • Learn the DevTool Secrets • Use Firefox Developer Tools: • WebGL Shader Editor • Web Audio Editor
56. CHIP Online | Mastertemplate deutsch TESTING TOOLS, WORKFLOWS AND BEST PRACTICES
57. "TDD IS A BETTER TOOL THAN DEBUGGING" ! WOLFRAM KRIESING, UXEBU
58. CHIP Online | Béla Varga Types of Web Application Testing 58 • Usability Testing • A/B Testing • Browser (Device) Testing • Unit Testing • End to End Testing • Integration Test • ...
59. CHIP Online | Béla Varga Browser and Device Testing 59 • Synchronized Cross Device Testing • BrowserSync with Grunt/Gulp • Adobe Edge Inspect CC • Free Internet Explorer VMs • Headless Testing (PhantomJS) • Automated Cross Browser Testing (DalekJS)
60. CHIP Online | Mastertemplate deutsch DEBUGGING & TRACING TOOLS, WORKFLOWS AND BEST PRACTICES
61. CHIP Online | Béla Varga Debugging and Tracing 61 • Browser Console and console.log(); • debugger; Statement • Chrome (Canary) Dev Tools • Event Listener Breakpoints • Async Call Stack • Google Chrome chrome://tracing/ • Google Web Tracing Framework • WebStorm 8 with spy-js
62. CHIP Online | Béla Varga Debugging property changes with JavaScript 62 var model = {'x': 12}; model.__defineGetter__('x', function() { debugger; }); var model = {'x': 12}; Object.defineProperty(model, 'x', {get : function(){ debugger; }}); var model = {'x': 12}; Object.observe(model, function(changes){ console.log(changes); }); Non-standard and deprecated ECMAScript 5 (IE9+ and modern Browsers) ECMAScript 6 (Google Chrome 36)
63. CHIP Online | Mastertemplate deutsch TASK RUNNER TOOLS, WORKFLOWS AND BEST PRACTICES
64. CHIP Online | Béla Varga Task Runner - Grunt 64 • Most popular task runner. • More a task runner then build tool. • Configuration with Gruntfile.js • Extendable with Plugins (2500+) • Can be slow in bigger projects (Pint).
65. CHIP Online | Mastertemplate deutsch BUILD SYSTEM TOOLS, WORKFLOWS AND BEST PRACTICES
66. CHIP Online | Béla Varga Build System - Gulp 66 • Streaming build system. • Uses node streams, vinyl • Very fast file handling and builds. • Configuration with gulpfile.js • Hard to manage errors.
67. CHIP Online | Béla Varga Build System - Broccoli 67 • Inspired by the rails asset pipeline. • Faster rebuilds (incremental). • Chainable plugins. • Avoids parallel execution. • Works together with grunt as plugin. • Early beta, but 
 under development.
68. CHIP Online | Mastertemplate deutsch DEPLOYMENT TOOLS, WORKFLOWS AND BEST PRACTICES
69. CONTINUOUS INTEGRATION (CI) IS THE PRACTICE, IN SOFTWARE ENGINEERING, OF MERGING ALL DEVELOPER WORKING COPIES WITH A SHARED MAINLINE SEVERAL TIMES A DAY. ! WIKIPEDIA
70. CHIP Online | Béla Varga Deployment 70 • rsync • grunt-ftp-deploy • Capistrano COMMAND LINE TOOLS VERSION CONTROL • git post-commit hook informs the server, and the server pulls the changes • with git remotes git push heroku yourbranch:master CONTINUOS INTEGRATION SERVERS • Travis • Jenkins DISTRIBUTED APPLICATIONS • Puppet, Chef • Docker (Linux Container LXC)
71. CHIP Online | Mastertemplate deutsch QUALITY MANAGEMENT TOOLS, WORKFLOWS AND BEST PRACTICES
72. CHIP Online | Béla Varga Better Code Quality 72 • Code Style Guide (pre commit hooks) • Linting and Hinting • Unit Testing • Code Coverage (Istanbul) • Source Analysis (Esprima, Plato) • Performance Metrics (grunt-devperf) • Workflows (peer review)
73. CHIP Online | Béla Varga Better Code Quality 73
74. CHIP Online | Mastertemplate deutsch CODE STANDARDS TOOLS, WORKFLOWS AND BEST PRACTICES
75. CHIP Online | Béla Varga Code Standards 75 • Use naming conventions (files, folders, classes). • It is not important which style, if it is always the same style. • Code should look like it was written by one person. • Use existing style guides (Node.js, jQuery, AirBnB).
76. "BEFORE YOU CODE, THINK. BEFORE YOU WRITE, READ. BEFORE YOU SPEAK, LISTEN. BEFORE YOU COMMENT, REFLECT. BEFORE YOU RELEASE, TEST" ! ADDY OSMANI, GOOGLE
77. THANK YOU! QUESTIONS?