Tweet
Tweet

Slide 1

Slide 1 text

WEB DEVELOPER TOOLBOX TOOLS, WORKFLOWS AND BEST PRACTICES

Slide 2

Slide 2 text

CHIP Online | Mastertemplate deutsch BÉLA VARGA JAVASCRIPT DEVELOPER 2 twitter.com/netzzwerg github.com/netzzwerg codepen.io/netzzwerg

Slide 3

Slide 3 text

CHIP Online | Mastertemplate deutsch CHIP DIGITAL HUBERT BURDA MEDIA COMPANY

Slide 4

Slide 4 text

CHIP Online | Mastertemplate deutsch DIE ECMANAUTEN A GROUP OF JAVASCRIPT SPECIALISTS

Slide 5

Slide 5 text

CHIP Online | Mastertemplate deutsch MUNICHJS JAVASCRIPT USER GROUP MUNICH Munich JS

Slide 6

Slide 6 text

CHIP Online | Mastertemplate deutsch CODERDOJO MUNICH FREE CODING CLUB FOR YOUNG PEOPLE CoderDojo Munich 1

Slide 7

Slide 7 text

WHY TOOLS, FRAMEWORKS AND WORKFLOWS?

Slide 8

Slide 8 text

CHIP Online | Béla Varga Why tools and workflows? 8

Slide 9

Slide 9 text

CHIP Online | Béla Varga Why tools and workflows? 9 • Reduce Complexity • Better Maintenance • Sustainable Software Development • Process Automation • Enforces Best Practices

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

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)

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

"THE ONLY THING MORE EXPENSIVE THAN WRITING SOFTWARE IS WRITING BAD SOFTWARE" ! ALAN COOPER, INTERACTION DESIGNER

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

CHIP Online | Mastertemplate deutsch LEARNING RESOURCES TOOLS, WORKFLOWS AND BEST PRACTICES

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

CHIP Online | Mastertemplate deutsch PROTOTYPING TOOLS, WORKFLOWS AND BEST PRACTICES

Slide 21

Slide 21 text

"FAKE IT. TRASH IT. BUILD IT." ! BEN EHMKE, 42FLOORS

Slide 22

Slide 22 text

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.

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

CHIP Online | Mastertemplate deutsch SCAFFOLDING TOOLS, WORKFLOWS AND BEST PRACTICES

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

CHIP Online | Béla Varga Scaffolding with Yeoman 27 Build System Generators Configuration Dependencies BOWER GRUNT/GULP YO

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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.

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

CHIP Online | Mastertemplate deutsch MODULES & COMPONENTS TOOLS, WORKFLOWS AND BEST PRACTICES

Slide 32

Slide 32 text

KEEP IT (F)OCUSED. KEEP IT (I)NDEPENDENT. KEEP IT (R)EUSABLE. KEEP IT (S)MALL. KEEP IT (T)ESTABLE. ! ADDY OSMANI, GOOGLE FIRST

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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.

Slide 35

Slide 35 text

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.

Slide 36

Slide 36 text

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.

Slide 37

Slide 37 text

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.

Slide 38

Slide 38 text

CHIP Online | Mastertemplate deutsch PACKAGE MANAGER TOOLS, WORKFLOWS AND BEST PRACTICES

Slide 39

Slide 39 text

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.

Slide 40

Slide 40 text

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)

Slide 41

Slide 41 text

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.

Slide 42

Slide 42 text

CHIP Online | Mastertemplate deutsch DEVELOPMENT ENVIRONMENTS TOOLS, WORKFLOWS AND BEST PRACTICES

Slide 43

Slide 43 text

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)

Slide 44

Slide 44 text

CHIP Online | Mastertemplate deutsch VERSION MANAGEMENT TOOLS, WORKFLOWS AND BEST PRACTICES

Slide 45

Slide 45 text

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)

Slide 46

Slide 46 text

CHIP Online | Béla Varga Version Management - Gitflow Workflow 46 MASTER HOTFIX RELEASE DEVELOP FEATURE 0.1 0.2 1.0

Slide 47

Slide 47 text

CHIP Online | Mastertemplate deutsch FRAMEWORKS TOOLS, WORKFLOWS AND BEST PRACTICES

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

CHIP Online | Mastertemplate deutsch JAVASCRIPT EDITOR & IDE TOOLS, WORKFLOWS AND BEST PRACTICES

Slide 50

Slide 50 text

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)

Slide 51

Slide 51 text

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.

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

CHIP Online | Mastertemplate deutsch BROWSER TOOLS TOOLS, WORKFLOWS AND BEST PRACTICES

Slide 54

Slide 54 text

CHIP Online | Béla Varga Browser Tools 54 • Google Chrome (Canary) DevTools • Mozilla Developer Tools • Browser Console • Plugins & Extensions • Bookmarklets

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

CHIP Online | Mastertemplate deutsch TESTING TOOLS, WORKFLOWS AND BEST PRACTICES

Slide 57

Slide 57 text

"TDD IS A BETTER TOOL THAN DEBUGGING" ! WOLFRAM KRIESING, UXEBU

Slide 58

Slide 58 text

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 • ...

Slide 59

Slide 59 text

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)

Slide 60

Slide 60 text

CHIP Online | Mastertemplate deutsch DEBUGGING & TRACING TOOLS, WORKFLOWS AND BEST PRACTICES

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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)

Slide 63

Slide 63 text

CHIP Online | Mastertemplate deutsch TASK RUNNER TOOLS, WORKFLOWS AND BEST PRACTICES

Slide 64

Slide 64 text

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).

Slide 65

Slide 65 text

CHIP Online | Mastertemplate deutsch BUILD SYSTEM TOOLS, WORKFLOWS AND BEST PRACTICES

Slide 66

Slide 66 text

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.

Slide 67

Slide 67 text

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.

Slide 68

Slide 68 text

CHIP Online | Mastertemplate deutsch DEPLOYMENT TOOLS, WORKFLOWS AND BEST PRACTICES

Slide 69

Slide 69 text

CONTINUOUS INTEGRATION (CI) IS THE PRACTICE, IN SOFTWARE ENGINEERING, OF MERGING ALL DEVELOPER WORKING COPIES WITH A SHARED MAINLINE SEVERAL TIMES A DAY. ! WIKIPEDIA

Slide 70

Slide 70 text

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)

Slide 71

Slide 71 text

CHIP Online | Mastertemplate deutsch QUALITY MANAGEMENT TOOLS, WORKFLOWS AND BEST PRACTICES

Slide 72

Slide 72 text

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)

Slide 73

Slide 73 text

CHIP Online | Béla Varga Better Code Quality 73

Slide 74

Slide 74 text

CHIP Online | Mastertemplate deutsch CODE STANDARDS TOOLS, WORKFLOWS AND BEST PRACTICES

Slide 75

Slide 75 text

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).

Slide 76

Slide 76 text

"BEFORE YOU CODE, THINK. BEFORE YOU WRITE, READ. BEFORE YOU SPEAK, LISTEN. BEFORE YOU COMMENT, REFLECT. BEFORE YOU RELEASE, TEST" ! ADDY OSMANI, GOOGLE

Slide 77

Slide 77 text

THANK YOU! QUESTIONS?