frontend build tools | competence center frontend & ux, ordina
TRANSCRIPT
![Page 1: Frontend build tools | Competence Center Frontend & UX, Ordina](https://reader031.vdocuments.net/reader031/viewer/2022031823/55a4f90c1a28aba16e8b46d1/html5/thumbnails/1.jpg)
Frontend Build ToolsCompetence Center Front-end & UX
Jan De WildeFrontend developer
![Page 2: Frontend build tools | Competence Center Frontend & UX, Ordina](https://reader031.vdocuments.net/reader031/viewer/2022031823/55a4f90c1a28aba16e8b46d1/html5/thumbnails/2.jpg)
Frontend Build Tools
▪ Intro
▪ Grunt: The JavaScript Task Runner
▪ Demo: Grunt
▪ Bower: Dependency Management
▪ Demo: Bower
▪ Yeoman: Scaffolding
▪ Gulp: The Streaming Build System
▪ Questions
![Page 3: Frontend build tools | Competence Center Frontend & UX, Ordina](https://reader031.vdocuments.net/reader031/viewer/2022031823/55a4f90c1a28aba16e8b46d1/html5/thumbnails/3.jpg)
Intro
Task runner? Dependency management? Scaffolding tool?▪ Automation▪ Minification▪ Compilation▪ Unit testing▪ Linting▪ Faster▪ Efficiency▪ Live feedback▪ Dependencies▪ ...
![Page 4: Frontend build tools | Competence Center Frontend & UX, Ordina](https://reader031.vdocuments.net/reader031/viewer/2022031823/55a4f90c1a28aba16e8b46d1/html5/thumbnails/4.jpg)
Grunt: The JavaScript Task Runner
Task runnerAutomationEcosystem with pluginsWrite your own pluginsInstalled and managed via npmpackage.jsonGruntfile.jsUses npm
![Page 5: Frontend build tools | Competence Center Frontend & UX, Ordina](https://reader031.vdocuments.net/reader031/viewer/2022031823/55a4f90c1a28aba16e8b46d1/html5/thumbnails/5.jpg)
package.json
In root of projectManages dependencies (version based)Install modules : npm install
~ : approximately equivalent to that version
![Page 6: Frontend build tools | Competence Center Frontend & UX, Ordina](https://reader031.vdocuments.net/reader031/viewer/2022031823/55a4f90c1a28aba16e8b46d1/html5/thumbnails/6.jpg)
Installing Grunt and gruntplugins
Use the command: npm install <module> --save-devE.g. npm install grunt --save-dev
▪ Install locally▪ Add to devDependencies in package.json▪ Using tilde version range
![Page 7: Frontend build tools | Competence Center Frontend & UX, Ordina](https://reader031.vdocuments.net/reader031/viewer/2022031823/55a4f90c1a28aba16e8b46d1/html5/thumbnails/7.jpg)
Gruntfile.js
Root of projectExists next to package.jsonComprised of:▪ The "wrapper" function▪ Project and task configuration▪ Loading Grunt plugins and tasks▪ Custom tasks
![Page 8: Frontend build tools | Competence Center Frontend & UX, Ordina](https://reader031.vdocuments.net/reader031/viewer/2022031823/55a4f90c1a28aba16e8b46d1/html5/thumbnails/8.jpg)
Grunt: Demo
All files on GitHub
https://github.com/MrJean/Ordina-CC-Frontend-and-UX/tree/master/Examples/Frontend%20Build%20Tools/demo
![Page 9: Frontend build tools | Competence Center Frontend & UX, Ordina](https://reader031.vdocuments.net/reader031/viewer/2022031823/55a4f90c1a28aba16e8b46d1/html5/thumbnails/9.jpg)
Bower: Dependency Management
Package managerFor the webFetching packagesInstalling packagesFlat dependency treeOne version of each packageUses npm
![Page 10: Frontend build tools | Competence Center Frontend & UX, Ordina](https://reader031.vdocuments.net/reader031/viewer/2022031823/55a4f90c1a28aba16e8b46d1/html5/thumbnails/10.jpg)
bower.json
Similar to package.jsonCreate interactively: bower init
bower install <package> --save# install package and add it to bower.json
dependencies
bower install <package> --save-dev# install package and add it to bower.json
devDependencies
![Page 11: Frontend build tools | Competence Center Frontend & UX, Ordina](https://reader031.vdocuments.net/reader031/viewer/2022031823/55a4f90c1a28aba16e8b46d1/html5/thumbnails/11.jpg)
Managing packages
bower install <package> (--save or --save-dev)
bower search <name>
bower update <package>
bower uninstall <package>
...
![Page 12: Frontend build tools | Competence Center Frontend & UX, Ordina](https://reader031.vdocuments.net/reader031/viewer/2022031823/55a4f90c1a28aba16e8b46d1/html5/thumbnails/12.jpg)
Bower: Demo
Create bower.jsonInclude jquery
bower install jquery --saveAdd to Grunt process within concat
'bower_components/**/dist/-> jquery.js'
![Page 13: Frontend build tools | Competence Center Frontend & UX, Ordina](https://reader031.vdocuments.net/reader031/viewer/2022031823/55a4f90c1a28aba16e8b46d1/html5/thumbnails/13.jpg)
Yeoman: Scaffolding
Scaffolding toolModern webbappsBest practicesGenerator ecosystemWorks with:▪ Grunt, Gulp.js▪ Bower, npm
![Page 14: Frontend build tools | Competence Center Frontend & UX, Ordina](https://reader031.vdocuments.net/reader031/viewer/2022031823/55a4f90c1a28aba16e8b46d1/html5/thumbnails/14.jpg)
One-line install
One-line install using npm:npm install -g yo
Yo needs bower, in case you don’t have it yet:npm install -g yo bower
-g : global install
![Page 15: Frontend build tools | Competence Center Frontend & UX, Ordina](https://reader031.vdocuments.net/reader031/viewer/2022031823/55a4f90c1a28aba16e8b46d1/html5/thumbnails/15.jpg)
Generators
Needed for scaffoldingInstall the right generatorTo scaffold a webapp:
npm install -g generator-webappRun generator:
yo webbappGenerators use walktroughAbility to create own generators
![Page 16: Frontend build tools | Competence Center Frontend & UX, Ordina](https://reader031.vdocuments.net/reader031/viewer/2022031823/55a4f90c1a28aba16e8b46d1/html5/thumbnails/16.jpg)
Grunt tasks under the hood
![Page 17: Frontend build tools | Competence Center Frontend & UX, Ordina](https://reader031.vdocuments.net/reader031/viewer/2022031823/55a4f90c1a28aba16e8b46d1/html5/thumbnails/17.jpg)
Gulp: The Streaming Build System
Alternative for GruntSpeed
Uses streamsEfficiency
Small stand-alone modulesSimplicity
Code over configurationBuilt on Node.js
![Page 18: Frontend build tools | Competence Center Frontend & UX, Ordina](https://reader031.vdocuments.net/reader031/viewer/2022031823/55a4f90c1a28aba16e8b46d1/html5/thumbnails/18.jpg)
Questions