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

2. THE JAVASCRIPT
REVOLUTION
THE NEW AGE OF SOFTWARE DEVELOPMENT
An original presentation by David Wesst / @davidwesst
Prarie Dev Con 2013 - Saskatoon, SK

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

4. DAVID WESST
@DAVIDWESST ON TWITTER
DAVIDWESST.COM ON THE WEB
DAVIDWESST.COM/BLOG ON THE BLOGOSPHERE
DW [AT] DAVIDWESST.COM ON EMAIL

5. FOLLOW ALONG
HTTP://DAVIDWESST.GITHUB.IO/DW-PRESENTATIONS

6. SLIDES AND DEMOS WILL BE POSTED
AFTERWARDS.

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

8. THE POINT
THEME FOR THIS PRESENTATION
TO SHOW YOU THAT
JAVASCRIPT IS A REAL
OPTION

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

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

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

12. WHY JAVASCRIPT?

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

14. WHY JAVASCRIPT?
Image Source: Wikimedia Commons

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

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

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

18. SURVIVAL SKILLS FOR
THE NEW AGE OF
JAVASCRIPT

19. SURVIVAL SKILLS FOR THE NEW AGE OF
JAVASCRIPT
OPEN SOURCE IS YOUR FRIEND

20. SURVIVAL SKILLS FOR THE NEW AGE OF
JAVASCRIPT
PLAN AND CHOOSE YOUR PLATFORMS

21. SURVIVAL SKILLS FOR THE NEW AGE OF
JAVASCRIPT
UNDERSTAND YOUR HTML5

22. 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)

23. MODERN DAY
JAVASCRIPT PROJECTS:
SOURCE CONTROL

24. HERE'S THE SECRET:
ANY SOURCE CONTROL
WILL DO!
BUT IN CASE YOU ARE GOING OPEN SOURCE
WITH YOUR PROJECT...

25. MODERN DAY JAVASCRIPT PROJECTS: SOURCE
CONTROL
A FEW CONSIDERATIONS FOR OPEN SOURCE PROJECTS
Visibility
Share-ability
Accessibility

26. 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)

27. MODERN DAY
JAVASCRIPT PROJECTS:
JAVASCRIPT CODE TODAY

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

29. MODERN DAY JAVASCRIPT PROJECTS:
JAVASCRIPT CODE TODAY
COMPILERS
Popular Examples
CoffeeScript - Ruby Like Syntax
TypeScript - Superset of JavaScript
For more check out Altjs.org

30. DEMO: COMPILERS
TYPESCRIPT

31. MODERN DAY JAVASCRIPT PROJECTS:
JAVASCRIPT CODE TODAY
MV* PATTERNS AND FRAMEWORKS
MVC, Model View Controller
MVVM, Model View ViewModel
MVP, Model View Presenter

32. MODERN DAY JAVASCRIPT PROJECTS:
JAVASCRIPT CODE TODAY
MV* PATTERNS AND FRAMEWORKS
Backbone (http://backbonejs.org/)
Knockout (http://knockoutjs.com/)
AngularJS (http://angularjs.org/)

33. DEMO: MV* PATTERNS
AND FRAMEWORKS
KNOCKOUTJS

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

35. DEMO: ON THE SERVER
WITH NODEJS
WALKING THROUGH NODEJS

36. MODERN DAY
JAVASCRIPT PROJECTS:
MANAGING
DEPENDENCIES

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

38. DEMO: MANAGING
DEPENDENCIES
REQUIREJS

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

40. DEMO: MANAGING
DEPENDENCIES
NPM, NODE PACKAGED MODULES

41. MODERN DAY
JAVASCRIPT PROJECTS:
TEST, TEST, AND TEST
AGAIN

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

43. 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)

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

45. 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)

46. DEMO: TEST, TEST, AND
TEST AGAIN
MOCHA

47. MODERN DAY
JAVASCRIPT PROJECTS:
BUILDING JAVASCRIPT

48. MODERN DAY JAVASCRIPT PROJECTS:
BUILDING JAVASCRIPT
WHY "BUILD" YOUR
JAVASCRIPT?
WE AREN'T REALLY BUILDING ANYTHING...ARE WE?

49. MODERN DAY JAVASCRIPT PROJECTS:
BUILDING JAVASCRIPT
YOU ARE NOW.

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

51. MODERN DAY JAVASCRIPT PROJECTS:
BUILDING JAVASCRIPT
SOME BUILDING SOLUTIONS
Travis-CI (Free for Open Source)
Jenkins
Whatever you want to execute CLI commands

53. DEMO: BUILDING
JAVASCRIPT
TRAVIS-CI

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

55. GRUNTJS.ORG

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

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

58. QUICK RECAP: THE POINT
THEME FOR THIS PRESENTATION
TO SHOW YOU THAT
JAVASCRIPT IS A REAL
OPTION

59. NEXT STEPS
Where do we go from here?

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

61. NEXT STEPS
CHECK OUT A RESOURCE
Douglas Crockford's Blog
JavaScript: The Good Parts
Checkout the npm (http://npmjs.org)

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

63. DAVID WESST
@DAVIDWESST ON TWITTER
DAVIDWESST.COM ON THE WEB
DAVIDWESST.COM/BLOG ON THE BLOGOSPHERE
DW [AT] DAVIDWESST.COM ON EMAIL