JavaScript Development Tools

A short journey
VR Leasing – 2016-06-29

Transcript

1. JavaScript Development Tools A SHORT JOURNEY Florian Hirsch / adorsys 1
2. pt in the 90s 2
3. The 2000s 3
4. HTML5 and CSS3 4
5. Ten years later 5
6. NodeJS (2009) 6
7. Non-blocking I/O Thread-based networking is relatively inefficient and very difficult to use Blocking methods execute synchronously and non- blocking methods execute asynchronously var fs = require('fs'); // blocking var data = fs.readFileSync('./data.txt'); // non-blocking fs.readFile('./data.txt', function(err, data) { // callback will be executed when data is read }); 7
8. Don't block! 8
9. JavaScript Event Loop 9
10. Hands on 10
12. RequireJS A JavaScript module loader 12
13. Hands on 13
14. NPM NODE PACKAGE MANAGER 14
15. “Use npm to install, share, and distribute code; manage dependencies in your projects; and share & receive feedback with others.” 15
16. Hands on npm init # setup configuration package.json npm install # execute configuration npm search lodash npm install lodash --save --save-exact # add a dependency with exact version npm install gulp --save-dev # add a development dependency (local) 16
17. ^1.2.3? 17
18. Semver 1.2.3 [MAJOR.MINOR.PATCH] MAJOR version when you make incompatible API changes MINOR version when you add functionality in a backwards-compatible manner PATCH version when you make backwards-compatible bug fixes. (not to be confused with ) sentimentalversioning.org 18
19. Tilde vs Caret ... and don't forget the major zero! pro tipp: ~1.2.3 – patch level (1.2.3 ... < 1.3.0) ^1.2.3 – minor level (1.2.3 ... < 2.0.0) * – latest version npm shrinkwrap 19
20. Bower A PACKAGE MANAGER FOR THE WEB 20
21. $ sudo apt-get install -y nodejs & npm install bower & bower install jquery You are now ready to fade a div out. 09:12 - 9 Apr 2015 1.195 921 I Am Devloper @iamdevloper Folgen 21
22. Hands on npm install bower bower init bower search jquery bower install jquery 22
23. Grunt THE JAVASCRIPT TASK RUNNER 23
24. Hands on npm init npm install --save-dev grunt grunt-contrib-clean \ grunt-contrib-concat grunt-eslint 24
25. Gulp THE STREAMING BUILD SYSTEM 25
26. Hands on npm init npm install --save-dev gulp gulp-concat \ gulp-rename gulp-uglify 26
27. Grunt or Gulp? Performance Code vs Configuration 27
28. PhantomJS HEADLESS WEBKIT WITH JAVASCRIPT API 28
29. Hello PhantomJS var page = require('webpage').create(); page.open('https://www.vr-leasing-gruppe.de/', function(status) { console.log('Page loaded with status: ' + status); if (status === "success") { page.render('vrleasing.png'); } phantom.exit(); }); 29
30. Testing 30
31. Hands on 31
32. Test runners 32
33. CSS pre-processing 33
34. Hands on 34
35. CSS post-processing 35
36. PostCSS .box { box-sizing: border-box; } gulp.task('styles', function() { return gulp.src('app/styles/main.scss') .pipe(autoprefixer({browsers: ['last 3 versions']})) .pipe(gulp.dest('dist/styles')); }); .box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 36
37. Yeoman 37
38. Yeoman yo angular:route abschluss -> app/scripts/controllers/abschluss.js angular.module('vrlobs').controller('AbschlussCtrl', function($scope) { }); -> app/views/myroute.html <p>This is the abschluss view</p> 38
39. Thanks 39