JavaScript Revolution - 5/Nov/13 - PrDC Saskatoon, SK

1,594 views

Published on

Slides from presentation delivered at Prairie Dev Con 2013 in Saskatoon, SK entitled JavaScript Revolution: The New Age of Software Development.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,594
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JavaScript Revolution - 5/Nov/13 - PrDC Saskatoon, SK

  1. 1. THE JAVASCRIPT REVOLUTION THE NEW AGE OF SOFTWARE DEVELOPMENT An original presentation by David Wesst / @davidwesst Prarie Dev Con 2013 - Saskatoon, SK
  2. 2. DAVID WESST FROM WINNIPEG, MANITOBA SYSTEMS ANALYST, UNIVERSITY OF MANITOBA (FACULTY OF MEDICINE) MICROSOFT MVP, INTERNET EXPLORER IE USER AGENT USERAGENTS.IE PRODUCER, BREWPUB STUDIOS
  3. 3. DAVID WESST @DAVIDWESST ON TWITTER DAVIDWESST.COM ON THE WEB DAVIDWESST.COM/BLOG ON THE BLOGOSPHERE DW [AT] DAVIDWESST.COM ON EMAIL
  4. 4. FOLLOW ALONG HTTP://DAVIDWESST.GITHUB.IO/DW-PRESENTATIONS
  5. 5. SLIDES AND DEMOS WILL BE POSTED AFTERWARDS.
  6. 6. THE POINT TO ACCOMPLISH ONE OF THESE BEFORE YOU LEAVE: To see some new JavaScript tools To understand how a JavaScript project can work To bring you up-to-speed with JavaScript
  7. 7. THE POINT THEME FOR THIS PRESENTATION TO SHOW YOU THAT JAVASCRIPT IS A REAL OPTION
  8. 8. THE PLAN A.K.A. THE AGENDA Why JavaScript? Survival Skills for the New Age of JavaScript Modern Day JavaScript Projects Source Control JavaScript Code Today Managing Dependencies Test, Test, and Test Again Building JavaScript Next Steps
  9. 9. THE PLAN SETTING YOUR EXPECTATIONS This presentation is... An overview of JavaScript modern development A review of JavaScript development tools A "core sample" of pure JavaScript development A taste of things to come for JavaScript at DevTeach
  10. 10. THE PLAN SETTING YOUR EXPECTATIONS This presentation is not... A 100% code-centric presentation A lesson on JavaScript coding practices A discussion on JavaScript ALM (Application Lifecycyle Management) A "deep-dive" into one or more specific JavaScript technologies
  11. 11. WHY JAVASCRIPT?
  12. 12. WHY JAVASCRIPT? COMMON ARGUMENTS ABOUT JAVASCRIPT JAVASCRIPT IS FOR CLIENT-SIDE WEB DEVELOPMENT AND NOTHING ELSE. IT'S NOT AN OO LANGUAGE, SO I CAN'T USE IT FOR ANYTHING. I DON'T PROGRAM FOR THE WEB, SO I DON'T NEED JAVASCRIPT ANYWAY.
  13. 13. WHY JAVASCRIPT? Image Source: Wikimedia Commons
  14. 14. JavaScript is for client-side web development and nothing else. NOT QUITE... Web Browsers Chrome Installed Apps / Chromium Apps iOS, Windows Phone, Android (through PhoneGap) Windows 8 Wii U
  15. 15. It's not an OO language, so I can't use it for anything. ACTUALLY, IT IS. Prototype-based Language Provides properties, classes, polymorphism, etc...
  16. 16. I don't program for the web, so I don't need JavaScript anyway. JAVASCRIPT LIVES OUTSIDE OF THE WEB Windows Store Apps Chromium and Firefox Apps Wii U PhoneGap
  17. 17. SURVIVAL SKILLS FOR THE NEW AGE OF JAVASCRIPT
  18. 18. SURVIVAL SKILLS FOR THE NEW AGE OF JAVASCRIPT OPEN SOURCE IS YOUR FRIEND
  19. 19. SURVIVAL SKILLS FOR THE NEW AGE OF JAVASCRIPT PLAN AND CHOOSE YOUR PLATFORMS
  20. 20. SURVIVAL SKILLS FOR THE NEW AGE OF JAVASCRIPT UNDERSTAND YOUR HTML5
  21. 21. SURVIVAL SKILLS FOR THE NEW AGE OF JAVASCRIPT EXPLORE YOUR ENVIRONMENT(S) Eclipse (Web Platform Tools, Aptana, Nodeclipse) Visual Studio 2012/2013 WebMatrix WebStorm Cloud9 (http://c9.io)
  22. 22. MODERN DAY JAVASCRIPT PROJECTS: SOURCE CONTROL
  23. 23. HERE'S THE SECRET: ANY SOURCE CONTROL WILL DO! BUT IN CASE YOU ARE GOING OPEN SOURCE WITH YOUR PROJECT...
  24. 24. MODERN DAY JAVASCRIPT PROJECTS: SOURCE CONTROL A FEW CONSIDERATIONS FOR OPEN SOURCE PROJECTS Visibility Share-ability Accessibility
  25. 25. MODERN DAY JAVASCRIPT PROJECTS: SOURCE CONTROL SOME OPTIONS Github (http://github.com) Bitbucket (http://bitbucket.org) CodePlex (http://codeplex.com) Google Code (http://code.google.com)
  26. 26. MODERN DAY JAVASCRIPT PROJECTS: JAVASCRIPT CODE TODAY
  27. 27. MODERN DAY JAVASCRIPT PROJECTS: JAVASCRIPT CODE TODAY COMPILERS Provide solution to some common "issues" with JavaScript More familiar syntax than JavaScript Provides common keywords like "class" and "interface" Compiles into optimized JavaScript Makes OO programming easier to learn in JavaScript
  28. 28. MODERN DAY JAVASCRIPT PROJECTS: JAVASCRIPT CODE TODAY COMPILERS Popular Examples CoffeeScript - Ruby Like Syntax TypeScript - Superset of JavaScript For more check out Altjs.org
  29. 29. DEMO: COMPILERS TYPESCRIPT
  30. 30. MODERN DAY JAVASCRIPT PROJECTS: JAVASCRIPT CODE TODAY MV* PATTERNS AND FRAMEWORKS MVC, Model View Controller MVVM, Model View ViewModel MVP, Model View Presenter
  31. 31. MODERN DAY JAVASCRIPT PROJECTS: JAVASCRIPT CODE TODAY MV* PATTERNS AND FRAMEWORKS Backbone (http://backbonejs.org/) Knockout (http://knockoutjs.com/) AngularJS (http://angularjs.org/)
  32. 32. DEMO: MV* PATTERNS AND FRAMEWORKS KNOCKOUTJS
  33. 33. MODERN DAY JAVASCRIPT PROJECTS: JAVASCRIPT CODE TODAY ON THE SERVER WITH NODEJS Runs JavaScript on the Server Open Source Technology Provides Asynchronous I/O, i.e. Non-Blocking I/O
  34. 34. DEMO: ON THE SERVER WITH NODEJS WALKING THROUGH NODEJS
  35. 35. MODERN DAY JAVASCRIPT PROJECTS: MANAGING DEPENDENCIES
  36. 36. MODERN DAY JAVASCRIPT PROJECTS: MANAGING DEPENDENCIES REQUIREJS Allows you to define and load JavaScript modules Removes need for "script" tags to define dependencies Runs JavaScript ONLY when dependencies are loaded
  37. 37. DEMO: MANAGING DEPENDENCIES REQUIREJS
  38. 38. MODERN DAY JAVASCRIPT PROJECTS: MANAGING DEPENDENCIES NPM, NODE PACKAGED MODULES Bundled with NodeJS Define dependencies through package name or git repo Throws errors when dependencies are not loaded properly Define dependencies in package.json
  39. 39. DEMO: MANAGING DEPENDENCIES NPM, NODE PACKAGED MODULES
  40. 40. MODERN DAY JAVASCRIPT PROJECTS: TEST, TEST, AND TEST AGAIN
  41. 41. MODERN DAY JAVASCRIPT PROJECTS: TEST, TEST, AND TEST AGAIN TESTING YOUR JAVASCRIPT Large number of frameworks for tests Apply TDD or BDD Practices Mocking frameworks exist as well Available for both client and server
  42. 42. MODERN DAY JAVASCRIPT PROJECTS: TEST, TEST, AND TEST AGAIN TESTING YOUR JAVASCRIPT: QUNIT Developed by jQuery Unit Testing Framework No external dependencies (not even jQuery)
  43. 43. MODERN DAY JAVASCRIPT PROJECTS: TEST, TEST, AND TEST AGAIN TESTING YOUR JAVASCRIPT: JASMINE BDD based framework Resembles RSpec No external dependencies Provides multiple output channels for results
  44. 44. MODERN DAY JAVASCRIPT PROJECTS: TEST, TEST, AND TEST AGAIN TESTING YOUR JAVASCRIPT: MOCHA BDD based framework Resembles RSpec Works with both client and server (NodeJS)
  45. 45. DEMO: TEST, TEST, AND TEST AGAIN MOCHA
  46. 46. MODERN DAY JAVASCRIPT PROJECTS: BUILDING JAVASCRIPT
  47. 47. MODERN DAY JAVASCRIPT PROJECTS: BUILDING JAVASCRIPT WHY "BUILD" YOUR JAVASCRIPT? WE AREN'T REALLY BUILDING ANYTHING...ARE WE?
  48. 48. MODERN DAY JAVASCRIPT PROJECTS: BUILDING JAVASCRIPT YOU ARE NOW.
  49. 49. MODERN DAY JAVASCRIPT PROJECTS: BUILDING JAVASCRIPT WHAT WE CAN TODAY DO TODAY WITH JAVASCRIPT 1. 2. 3. 4. Get our source Compile it (from TypeScript) Setup dependencies Test it
  50. 50. MODERN DAY JAVASCRIPT PROJECTS: BUILDING JAVASCRIPT SOME BUILDING SOLUTIONS Travis-CI (Free for Open Source) Jenkins Whatever you want to execute CLI commands
  51. 51. DEMO: BUILDING JAVASCRIPT TRAVIS-CI
  52. 52. MODERN DAY JAVASCRIPT PROJECTS: BUILDING JAVASCRIPT GRUNT: THE JAVASCRIPT CLI TOOL Open Source Provides CLI to run common project actions Allows you to define custom CLI actions
  53. 53. GRUNTJS.ORG
  54. 54. QUICK RECAP: THE PLAN Why JavaScript? Survival Skills for the New Age of JavaScript Modern Day JavaScript Projects Source Control JavaScript Code Today Managing Dependencies Test, Test, and Test Again Building JavaScript Next Steps
  55. 55. QUICK RECAP: THE POINT TO ACCOMPLISH ONE OF THESE BEFORE YOU LEAVE: To see some new JavaScript tools To understand how a JavaScript project can work To bring you up-to-speed with JavaScript
  56. 56. QUICK RECAP: THE POINT THEME FOR THIS PRESENTATION TO SHOW YOU THAT JAVASCRIPT IS A REAL OPTION
  57. 57. NEXT STEPS Where do we go from here?
  58. 58. NEXT STEPS Go to the other JavaScript/HTML5 Presentations at PrDC Make Your Own JavaScript Project Leverage one of the tools in your exiting projects Build a JavaScript Project
  59. 59. NEXT STEPS CHECK OUT A RESOURCE Douglas Crockford's Blog JavaScript: The Good Parts Checkout the npm (http://npmjs.org)
  60. 60. DAVID WESST FROM WINNIPEG, MANITOBA SYSTEMS ANALYST, UNIVERSITY OF MANITOBA (FACULTY OF MEDICINE) MICROSOFT MVP, INTERNET EXPLORER IE USER AGENT USERAGENTS.IE PRODUCER, BREWPUB GAMES
  61. 61. DAVID WESST @DAVIDWESST ON TWITTER DAVIDWESST.COM ON THE WEB DAVIDWESST.COM/BLOG ON THE BLOGOSPHERE DW [AT] DAVIDWESST.COM ON EMAIL

×