Javascript Workflow Development is a tough topic these days. We'll take a journey about common tasks and tools that help automating it. From theory to practice we'll explore task managers, transpilers, test runners and linters ending with a demonstration of the approach we are currently following at Open Networking Laboratory to handle a community driven complex interface.

1. Javascript
development workflow

2. hello!
I am Matteo Scandolo
You can find me at @teone

3. I am a
developer

4. Frontend Architect

5. What is CORD
Proprietary hardware
And software
Embedded
services
$ $ $
Commodity
hardware
Function
virtualization
Open Source
software

6. I am not a
Network Engineer
For more information visit:
www.opencord.org

7. < 2009 - ante Google Maps
Javascript as it was

8. “
Was invented by Brendan Eich
in 1995

9. “
Was written in
10
days

10. “Sometimes is a bit immature...
var x = ['10', '10', '10'];
var y = x.map(parseInt)
console.log(y) ////[10, Nan, 2]

11. “Sometimes is a bit immature...
console.log(NaN === NaN)
//false

12. “Sometimes is a bit immature...
console.log(typeof [] === typeof {})
// true

13. “But it is certainly funny!
console.log(Array(16).join('a' -1) + " Batman!")

14. “Javascript as a presentation
enhancement.

15. Javascript
Revolution
November 8th 2009

16. “Ryan Dahl
presents

17. “The web has evolved

19. Javascript libraries explosion

20. Tooling
Comes to help!

21. Package Managers

22. Modules Bundler
System Js

23. Pipeline

24. Scaffolding

25. Where they helps
In everyday life

26. Transpilers
Babel
Typescript
Coffescript
dart

27. Tests
Istanbul
Blanket
Dredd
BackstopJS
PhantomJs
Protractor
selenium
Karma
Jasmine
Mocha
Chai

28. Syntax checkers
EsLint
JsLint
JsHint
Jscs

29. 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

30. What I’m using

31. CORD Infrastructure
XOS
REST
APIs
External
Apps
Custom
Dashboards
$resource
creation
Component
library
Yeoman
generator
Blueprint
Api
definition
Dredd
(testing)

32. Demo Time!

33. “Yeoman + Gulp
Complex project
Different configurations
Different environment
Custom Dashboards

34. “NPM scripts
Simple Projects
Proof of concept
Remove complexity
External Applications

35. In my experience
AKA errors I made

36. One step at a time
1

37. Know your enemy
2

38. It hurt
3
When the build brokes
(on friday night)

39. There isn’t a solution
4
That works for all the problems

40. Join the CORD community!
Partecipate in development and environment setup
Report bugs
Jira.opencord.org
slackin.opencord.org

41. Thanks for listening
Questions??