Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Modern Frontend Development
Thorsten Rinne
February 13, 2014
Programming
3
400
Modern Frontend Development
Thorsten Rinne
February 13, 2014
Tweet
Share
More Decks by Thorsten Rinne
See All by Thorsten Rinne
Angular Best Practices @ Hackerkiste
thorsten
3
79
Angular Best Practices
thorsten
2
130
Modernisierung von Legacy Applikationen auf HTML5
thorsten
1
77
Entwicklung moderner Web-Apps mit HTML5 und JavaScript
thorsten
1
85
Modernes Frontend Development
thorsten
2
150
Moderne Web-Apps mit HTML5 und JavaScript
thorsten
0
100
Bootstrap Your Project!
thorsten
2
530
Real Time Web Applications mit HTML5 und JavaScript - Part 2
thorsten
0
290
Real Time Web Applications mit HTML5 und JavaScript - Part 1
thorsten
0
210
Other Decks in Programming
See All in Programming
Running Laravel/PHP on AWS (AWS Builders Day Taiwan 2022)
dwchiang
0
130
A Philosophy of Software Design 後半
yosuke_furukawa
PRO
8
2.5k
Gitlab CIでMRを自動生成する
forcia_dev_pr
0
110
Baseline Profilesでアプリのパフォーマンスを向上させる / Improve app performance with Baseline Profiles
numeroanddev
0
210
GoogleI/O2022 LT報告会資料
shinsukefujita1126
0
200
Springin‘でみんなもクリエイターに!
ueponx
0
120
設計ナイト2022 トランザクションスクリプト
shinpeim
11
2k
The strategies behind ddd – AdeoDevSummit 2022
lilobase
PRO
4
220
ANR overview at Uber + Leveraging ApplicationExitInfo API
yhartanto
0
320
実践エクストリームプログラミング / Extreme Programming in Practice
enk
1
290
Treasure.map(): Functional programming in JVM-based languages
paranoidmonoid
0
130
Git・Git-Flowについて
nerusan_main
0
400
Featured
See All Featured
Practical Orchestrator
shlominoach
178
8.6k
GraphQLとの向き合い方2022年版
quramy
16
8.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1M
Adopting Sorbet at Scale
ufuk
63
7.6k
Why Our Code Smells
bkeepers
PRO
324
55k
Mobile First: as difficult as doing things right
swwweet
213
7.5k
Teambox: Starting and Learning
jrom
123
7.7k
Documentation Writing (for coders)
carmenhchung
48
2.5k
4 Signs Your Business is Dying
shpigford
169
20k
Code Review Best Practice
trishagee
43
8.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
It's Worth the Effort
3n
172
25k
Transcript
MODERN FRONTEND DEVELOPMENT NFQ Office Kaunas
THORSTEN RINNE ‣ studied CS ‣ Team Lead Engineering ‣
Yatego GmbH ‣ phpMyFAQ ! ‣ @ThorstenRinne
Today’s agenda Editor / IDE Browser Browser Dev Tools $
The command line Development Tools Demo
Editor / IDE
Let the developers decide!
None
Sublime Text TextMate UltraEdit vi Emacs ...
You can edit in the browser!
Browser
None
Which Versions? Chrome latest (currently version 32) Chromium latest (currently
version 34) Firefox latest (currently version 27) Firefox Nightly latest (currently version 30) Safari latest (currently version 6.1 / 7) Forget Opera, as it’s just a Chrome
Is someone missing?
None
Which IE versions? Internet Explorer 7 (?) Internet Explorer 8
Internet Explorer 9 Internet Explorer 10 Internet Explorer 11
Browser Developer Tools
chrome://flags Experimental Developer Tools experiments
Live Editing + Autosave
Performance measuring
Performance measuring Overview of memory usage Helps searching for performance
problems Layout or scripts Our goal should be 60 frames per second :-)
Memory and DOM Leaks
Memory and DOM Leaks JavaScript CPU Profiling Heap Snapshot for
JavaScript objects DOM nodes Search for potential memory and/or DOM leaks
Mobile Testing
Mobile Testing User Agent Different devices Android iOS Windows Phone
Simulation of touch events Changing geolocation and accelerometers
The Terminal
NO FEAR
The command line makes you smile ❤ ~/
Let the CLI look awesome! Please install „dotfiles“
None
http://dotfiles.github.io
Please install the Swiss army knife of every web developer.
None
Socket.IO: cross browser sockets Express: like Sinatra or Silex Grunt:
a JavaScript task runner Bower: a package manager for the web Yeoman: CLI interface for scaffolding JSHint / JSLint
Linting on save on commit during build
Automatisation
Why?
Developers are lazy!
Linting Resolve depedencies Concat and compiling Testing Remove debug code
$ npm install grunt-cli -g The JavaScript Task Runner
The JavaScript Task Runner task based CLI tool like make
/ rake / ant / phing Configuration in JavaScript Huge community hundreds of plugins Linting, Concat, Watcher, Testing out of the box
$ cd /path/to/project ! $ npm install grunt --save-dev How
to install Grunt
{ "name": "yatego.com", "version": "2.0.0", "dependencies": {}, "devDependencies": { "grunt":
"~0.4.1", "grunt-contrib-jshint": "~0.4.1", "grunt-contrib-uglify": "~0.2.2" }, "engines": { "node": ">=0.10.0" }, "author": "Yatego GmbH", } package.json
module.exports = function(grunt) { ! grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: {
options: { banner: '/*! <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); ! grunt.loadNpmTasks('grunt-contrib-uglify'); ! grunt.registerTask('default', ['uglify']); ! }; Gruntfile.js
// Run Jasmine and DalekJS tests grunt.registerTask( 'testrun', ['jshint', 'jasmine',
'dalek'] ); ! // Build production grunt.registerTask( 'production', ['copy', 'less', 'cssmin', 'jshint', 'uglify'] ); Grunt Tasks
The JavaScript Task Runner http://gruntjs.com http://gruntjs.com/plugins
Linting JSHint or JSLint .jshintrc $ npm install grunt-contrib-jshint --save-dev
LiveReload Plugins for Chrome Firefox Safari Triggers page reload via
grunt watch Browser extensions on http://livereload.com/
Package Manager for the web Install and remove packages No
external dependencies No sudo permissions Blazing fast installation: $ npm install bower -g
How to install packages ! ! ! $ bower install
$ bower install <package> $ bower install <package>#<version> $ bower install <name>=<package>#<version>
Package resources Registered Bower packages like jQuery Git repositories Local
folders URLs with .zip/.tar.gz files Will be installed to bower_components by default
Search packages $ bower search <package>
Simple package usage <script src="/bower_components/jquery/jquery.min.js"> </script>
Deleting packages $ bower remove <package>
Configuration .bowerrc { "directory": "./components" }
Configuration bower.json { "name": "yatego.com", "version": "2.0.0", "dependencies": { "jquery":
"1.10.2", "bootstrap": "3.0.0", "modernizr": "2.6.2" }, "devDependencies": { "jasmine": "~1.3.1", }, "resolutions": { "jquery": "1.10.2" } }
Useful Grunt tasks grunt-contrib-copy grunt-contrib-concat grunt-contrib-uglify grunt-contrib-cssmin grunt-contrib-imagemin
None
Testing Unittests with Jasmine PhantomJS Chrome Firefox Chrome Canary Firefox
Nightly UI Testing with DalekJS PhantomJS Chrome Firefox Internet Explorer!
Jasmine describe("Cart", function() { ! beforeEach(function() { $.yategoCart().removeAll(); }); !
it("Checks if add item works", function() { $.yategoCart().addItem("test-pos-1", "test-offer-1", 3); expect($.yategoCart().hasItem("test-offer-1")).toEqual(true); }); ! it("Checks if change quantity works", function() { $.yategoCart().addItem("test-pos-2", "test-offer-2", 3); $.yategoCart().addItemQty("test-offer-2", 2); expect($.yategoCart().getItemQty("test-offer-2")).toEqual(5); }); });
Jasmine via PhantomJS $ grunt jasmine Running "jasmine:pivotal" (jasmine) task
Testing jasmine specs via phantom ............................ 28 specs in 0.229s. >> 0 failures ! Done, without errors.
Test‘em Testrunner Test Framework for Jasmine QUnit Mocha Buster.js For
all browsers and PhantomJS
How to install Test‘em $ npm install testem -g
$ testem
None
BOOM!
None
Testing with DalekJS New UI Testing Framework Early stage, currently
version 0.0.8 Faster than Selenium Tests written in JavaScript Supports all browsers and PhantomJS
Testing with DalekJS module.exports = { 'Page title is correct':
function (test) { test.open('http://www.yatego.dev') .assert.title().is('Yatego Shopping', 'It has title') .done(); }, 'Search page is correct': function (test) { test.open('http://www.yatego.dev/search?q=Test') .assert.title().is('Test - yatego.com', 'It has title') .done(); } };
Testing with DalekJS
Awesome. And now?
Why couldn’t it be more easy?
Yeoman!
Yeoman Scaffolding of new apps Writes Grunt configuration Yeoman =
Grunt + Bower + Awesomeness Blazing fast installation $ npm install -g yo
Yeoman $ npm install -g generator-webapp $ cd /path/to/webroot
$ mkdir nfqApp $ cd nfqApp $ yo nfqApp
Yeoman $ grunt server ! $ grunt test ! $
grunt build
Generator WebApp Watcher for HTML, CSS and JS with LiveReload
Builtin Webserver at Port 9000 JSHint Mocha tests Bootstrap 3
DEMO
Available generators AngularJS WordPress EmberJS Firefox OS Apps ExpressJS Laravel
Knockout Jekyll Phonegap Meteor Symfony2
Example Yatego 2.0 www.yatego.com
Frontend vs. Backend Frontend 3 Developer Bootstrap 3 based Testen
via Jasmine Grunt / LiveReload Deployment Assetserver Backend 6 Developer Symfony 2.3 Testen via PHPUnit app/console + ant Deployment Capifony
Advantages everyone could use his own workflow Test-Driven-Development for frontend
and backend LiveReload saves hitting the F5 key all the time Many JavaScript errors were found before the release
Questions? Comments?
Thanks for your attention! :-) Twitter: @ThorstenRinne Slides: http://speakerdeck.com/u/thorsten Thorsten
Rinne Yatego GmbH thorsten@yatego.com