Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Front End development workflow

525 views

Published on

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.

Published in: Technology

Front End development workflow

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

×