front end development workflow
TRANSCRIPT
![Page 1: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/1.jpg)
Javascript
development workflow
![Page 2: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/2.jpg)
hello!
I am Matteo Scandolo
You can find me at @teone
![Page 3: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/3.jpg)
I am a
developer
![Page 4: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/4.jpg)
Frontend Architect
![Page 5: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/5.jpg)
What is CORD
Proprietary hardware
And software
Embedded
services
$ $ $
Commodity
hardware
Function
virtualization
Open Source
software
![Page 6: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/6.jpg)
I am not a
Network Engineer
For more information visit:
www.opencord.org
![Page 7: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/7.jpg)
< 2009 - ante Google Maps
Javascript as it was
![Page 8: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/8.jpg)
“
Was invented by Brendan Eich
in 1995
![Page 9: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/9.jpg)
“
Was written in
10
days
![Page 10: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/10.jpg)
“Sometimes is a bit immature...
var x = ['10', '10', '10'];
var y = x.map(parseInt)
console.log(y) ////[10, Nan, 2]
![Page 11: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/11.jpg)
“Sometimes is a bit immature...
console.log(NaN === NaN)
//false
![Page 12: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/12.jpg)
“Sometimes is a bit immature...
console.log(typeof [] === typeof {})
// true
![Page 13: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/13.jpg)
“But it is certainly funny!
console.log(Array(16).join('a' -1) + " Batman!")
![Page 14: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/14.jpg)
“Javascript as a presentation
enhancement.
![Page 15: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/15.jpg)
Javascript
Revolution
November 8th 2009
![Page 16: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/16.jpg)
“Ryan Dahl
presents
![Page 17: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/17.jpg)
“The web has evolved
![Page 18: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/18.jpg)
![Page 19: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/19.jpg)
Javascript libraries explosion
![Page 20: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/20.jpg)
Tooling
Comes to help!
![Page 21: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/21.jpg)
Package Managers
![Page 22: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/22.jpg)
Modules Bundler
System Js
![Page 23: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/23.jpg)
Pipeline
![Page 24: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/24.jpg)
Scaffolding
![Page 25: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/25.jpg)
Where they helps
In everyday life
![Page 26: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/26.jpg)
Transpilers
Babel
Typescript
Coffescript
dart
![Page 27: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/27.jpg)
Tests
Istanbul
Blanket
Dredd
BackstopJS
PhantomJs
Protractor
selenium
Karma
Jasmine
Mocha
Chai
![Page 28: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/28.jpg)
Syntax checkers
EsLint
JsLint
JsHint
Jscs
![Page 29: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/29.jpg)
Build
Development:
� Source mapping
(js, css)
� Live Reload
� Unit tests
� Environments
Testing (CI)
� Source mapping
(js, css)
� Mock data
� Coverage
� Dependencies
check (npm-check)
Production:
� Uglify
� Minification
� Asset handling
○ Gzip
○ Sprites
� Css Optimization
![Page 30: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/30.jpg)
What I’m using
![Page 31: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/31.jpg)
CORD Infrastructure
XOS
REST
APIs
External
Apps
Custom
Dashboards
$resource
creation
Component
library
Yeoman
generator
Blueprint
Api
definition
Dredd
(testing)
![Page 32: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/32.jpg)
Demo Time!
![Page 33: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/33.jpg)
“Yeoman + Gulp
� Complex project
� Different configurations
� Different environment
Custom Dashboards
![Page 34: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/34.jpg)
“NPM scripts
� Simple Projects
� Proof of concept
� Remove complexity
External Applications
![Page 35: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/35.jpg)
In my experience
AKA errors I made
![Page 36: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/36.jpg)
One step at a time
1
![Page 37: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/37.jpg)
Know your enemy
2
![Page 38: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/38.jpg)
It hurt
3
When the build brokes
(on friday night)
![Page 39: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/39.jpg)
There isn’t a solution
4
That works for all the problems
![Page 40: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/40.jpg)
Join the CORD community!
Partecipate in development and environment setup
Report bugs
Jira.opencord.org
slackin.opencord.org
![Page 41: Front End development workflow](https://reader031.vdocuments.site/reader031/viewer/2022020301/58a9d7961a28aba05b8b4f59/html5/thumbnails/41.jpg)
Thanks for listening
Questions??