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.
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)
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.
repetitive work. • Reduce human error. • Focus on the real problems. • Use best practices conserved in tools and frameworks. • Better performance and faster response times.
Version Management A/B Testing Unit Tests Integration Tests Debugging Build System Build System Scaffolding Frameworks Task Runner Quality Management PROTOTYPING 17 DEVELOPMENT DEPLOYMENT
• 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.
• 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.
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.
• 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.
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.
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.
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.
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)
50 IDE clean and functional workflow included CODE EDITOR fast editing for projects (.settings) single developer bigger teams extendable tools integrated (git, testing)
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 • 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
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
• 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).
• 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.
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)
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).
netzzwerg
youkidearitai
kuboaki
h455h1
bkuhlmann
niftycorp
okashoi
pangmoo
hidekatsu_izuno
coconala_engineer
hanyudaeiiti
jeremyfreeagent
colly
holman
philhawksworth
sugarenia
cherdarchuk
samanthasiow
eitanlees
addyosmani
stephaniewalter
kevinliebholz
bkeepers
