JavaScript Revolution - 5/Nov/13 - PrDC Saskatoon, SK
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 1,358 views

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

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

Statistics

Views

Total Views
1,358
Views on SlideShare
1,358
Embed Views
0

Actions

Likes
0
Downloads
14
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 1. THE JAVASCRIPT REVOLUTION THE NEW AGE OF SOFTWARE DEVELOPMENT An original presentation by David Wesst / @davidwesst Prarie Dev Con 2013 - Saskatoon, SK
  • 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. DAVID WESST @DAVIDWESST ON TWITTER DAVIDWESST.COM ON THE WEB DAVIDWESST.COM/BLOG ON THE BLOGOSPHERE DW [AT] DAVIDWESST.COM ON EMAIL
  • 4. FOLLOW ALONG HTTP://DAVIDWESST.GITHUB.IO/DW-PRESENTATIONS
  • 5. SLIDES AND DEMOS WILL BE POSTED AFTERWARDS.
  • 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. THE POINT THEME FOR THIS PRESENTATION TO SHOW YOU THAT JAVASCRIPT IS A REAL OPTION
  • 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. 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. 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. WHY JAVASCRIPT?
  • 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. WHY JAVASCRIPT? Image Source: Wikimedia Commons
  • 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. 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. 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. SURVIVAL SKILLS FOR THE NEW AGE OF JAVASCRIPT
  • 18. SURVIVAL SKILLS FOR THE NEW AGE OF JAVASCRIPT OPEN SOURCE IS YOUR FRIEND
  • 19. SURVIVAL SKILLS FOR THE NEW AGE OF JAVASCRIPT PLAN AND CHOOSE YOUR PLATFORMS
  • 20. SURVIVAL SKILLS FOR THE NEW AGE OF JAVASCRIPT UNDERSTAND YOUR HTML5
  • 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. MODERN DAY JAVASCRIPT PROJECTS: SOURCE CONTROL
  • 23. HERE'S THE SECRET: ANY SOURCE CONTROL WILL DO! BUT IN CASE YOU ARE GOING OPEN SOURCE WITH YOUR PROJECT...
  • 24. MODERN DAY JAVASCRIPT PROJECTS: SOURCE CONTROL A FEW CONSIDERATIONS FOR OPEN SOURCE PROJECTS Visibility Share-ability Accessibility
  • 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. MODERN DAY JAVASCRIPT PROJECTS: JAVASCRIPT CODE TODAY
  • 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. 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. DEMO: COMPILERS TYPESCRIPT
  • 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. MODERN DAY JAVASCRIPT PROJECTS: JAVASCRIPT CODE TODAY MV* PATTERNS AND FRAMEWORKS Backbone (http://backbonejs.org/) Knockout (http://knockoutjs.com/) AngularJS (http://angularjs.org/)
  • 32. DEMO: MV* PATTERNS AND FRAMEWORKS KNOCKOUTJS
  • 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. DEMO: ON THE SERVER WITH NODEJS WALKING THROUGH NODEJS
  • 35. MODERN DAY JAVASCRIPT PROJECTS: MANAGING DEPENDENCIES
  • 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. DEMO: MANAGING DEPENDENCIES REQUIREJS
  • 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. DEMO: MANAGING DEPENDENCIES NPM, NODE PACKAGED MODULES
  • 40. MODERN DAY JAVASCRIPT PROJECTS: TEST, TEST, AND TEST AGAIN
  • 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. 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. 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. 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. DEMO: TEST, TEST, AND TEST AGAIN MOCHA
  • 46. MODERN DAY JAVASCRIPT PROJECTS: BUILDING JAVASCRIPT
  • 47. MODERN DAY JAVASCRIPT PROJECTS: BUILDING JAVASCRIPT WHY "BUILD" YOUR JAVASCRIPT? WE AREN'T REALLY BUILDING ANYTHING...ARE WE?
  • 48. MODERN DAY JAVASCRIPT PROJECTS: BUILDING JAVASCRIPT YOU ARE NOW.
  • 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. MODERN DAY JAVASCRIPT PROJECTS: BUILDING JAVASCRIPT SOME BUILDING SOLUTIONS Travis-CI (Free for Open Source) Jenkins Whatever you want to execute CLI commands
  • 51. DEMO: BUILDING JAVASCRIPT TRAVIS-CI
  • 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. GRUNTJS.ORG
  • 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. 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. QUICK RECAP: THE POINT THEME FOR THIS PRESENTATION TO SHOW YOU THAT JAVASCRIPT IS A REAL OPTION
  • 57. NEXT STEPS Where do we go from here?
  • 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. NEXT STEPS CHECK OUT A RESOURCE Douglas Crockford's Blog JavaScript: The Good Parts Checkout the npm (http://npmjs.org)
  • 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. DAVID WESST @DAVIDWESST ON TWITTER DAVIDWESST.COM ON THE WEB DAVIDWESST.COM/BLOG ON THE BLOGOSPHERE DW [AT] DAVIDWESST.COM ON EMAIL