THE JAVASCRIPT
REVOLUTION

THE NEW AGE OF SOFTWARE DEVELOPMENT
An original presentation by David Wesst / @davidwesst

Prar...
DAVID WESST

FROM WINNIPEG, MANITOBA
SYSTEMS ANALYST, UNIVERSITY OF MANITOBA (FACULTY OF
MEDICINE)
MICROSOFT MVP, INTERNET...
DAVID WESST

@DAVIDWESST ON TWITTER
DAVIDWESST.COM ON THE WEB
DAVIDWESST.COM/BLOG ON THE BLOGOSPHERE
DW [AT] DAVIDWESST.CO...
FOLLOW ALONG

HTTP://DAVIDWESST.GITHUB.IO/DW-PRESENTATIONS
SLIDES AND DEMOS WILL BE POSTED
AFTERWARDS.
THE POINT

TO ACCOMPLISH ONE OF THESE BEFORE YOU LEAVE:
To see some new JavaScript tools
To understand how a JavaScript pr...
THE POINT

THEME FOR THIS PRESENTATION

TO SHOW YOU THAT
JAVASCRIPT IS A REAL
OPTION
THE PLAN

A.K.A. THE AGENDA
Why JavaScript?
Survival Skills for the New Age of JavaScript
Modern Day JavaScript Projects
S...
THE PLAN

SETTING YOUR EXPECTATIONS
This presentation is...
An overview of JavaScript modern development
A review of JavaS...
THE PLAN

SETTING YOUR EXPECTATIONS
This presentation is not...
A 100% code-centric presentation
A lesson on JavaScript co...
WHY JAVASCRIPT?
WHY JAVASCRIPT?

COMMON ARGUMENTS ABOUT JAVASCRIPT
JAVASCRIPT IS FOR CLIENT-SIDE WEB DEVELOPMENT AND
NOTHING ELSE.
IT'S NO...
WHY JAVASCRIPT?

Image Source: Wikimedia Commons
JavaScript is for client-side web development
and nothing else.

NOT QUITE...
Web Browsers
Chrome Installed Apps / Chromiu...
It's not an OO language, so I can't use it for
anything.

ACTUALLY, IT IS.
Prototype-based Language
Provides properties, c...
I don't program for the web, so I don't need
JavaScript anyway.

JAVASCRIPT LIVES OUTSIDE OF THE WEB
Windows Store Apps
Ch...
SURVIVAL SKILLS FOR
THE NEW AGE OF
JAVASCRIPT
SURVIVAL SKILLS FOR THE NEW AGE OF
JAVASCRIPT
OPEN SOURCE IS YOUR FRIEND
SURVIVAL SKILLS FOR THE NEW AGE OF
JAVASCRIPT
PLAN AND CHOOSE YOUR PLATFORMS
SURVIVAL SKILLS FOR THE NEW AGE OF
JAVASCRIPT
UNDERSTAND YOUR HTML5
SURVIVAL SKILLS FOR THE NEW AGE OF
JAVASCRIPT
EXPLORE YOUR ENVIRONMENT(S)

Eclipse (Web Platform Tools, Aptana, Nodeclipse...
MODERN DAY
JAVASCRIPT PROJECTS:
SOURCE CONTROL
HERE'S THE SECRET:

ANY SOURCE CONTROL
WILL DO!
BUT IN CASE YOU ARE GOING OPEN SOURCE
WITH YOUR PROJECT...
MODERN DAY JAVASCRIPT PROJECTS: SOURCE
CONTROL
A FEW CONSIDERATIONS FOR OPEN SOURCE PROJECTS
Visibility
Share-ability
Acce...
MODERN DAY JAVASCRIPT PROJECTS: SOURCE
CONTROL
SOME OPTIONS

Github (http://github.com)
Bitbucket (http://bitbucket.org)
C...
MODERN DAY
JAVASCRIPT PROJECTS:
JAVASCRIPT CODE TODAY
MODERN DAY JAVASCRIPT PROJECTS:
JAVASCRIPT CODE TODAY
COMPILERS

Provide solution to some common "issues" with JavaScript
...
MODERN DAY JAVASCRIPT PROJECTS:
JAVASCRIPT CODE TODAY
COMPILERS

Popular Examples
CoffeeScript - Ruby Like Syntax
TypeScri...
DEMO: COMPILERS
TYPESCRIPT
MODERN DAY JAVASCRIPT PROJECTS:
JAVASCRIPT CODE TODAY
MV* PATTERNS AND FRAMEWORKS
MVC, Model View Controller
MVVM, Model V...
MODERN DAY JAVASCRIPT PROJECTS:
JAVASCRIPT CODE TODAY
MV* PATTERNS AND FRAMEWORKS

Backbone (http://backbonejs.org/)
Knock...
DEMO: MV* PATTERNS
AND FRAMEWORKS
KNOCKOUTJS
MODERN DAY JAVASCRIPT PROJECTS:
JAVASCRIPT CODE TODAY
ON THE SERVER WITH NODEJS

Runs JavaScript on the Server
Open Source...
DEMO: ON THE SERVER
WITH NODEJS
WALKING THROUGH NODEJS
MODERN DAY
JAVASCRIPT PROJECTS:
MANAGING
DEPENDENCIES
MODERN DAY JAVASCRIPT PROJECTS:
MANAGING DEPENDENCIES
REQUIREJS

Allows you to define and load JavaScript modules
Removes ...
DEMO: MANAGING
DEPENDENCIES
REQUIREJS
MODERN DAY JAVASCRIPT PROJECTS:
MANAGING DEPENDENCIES
NPM, NODE PACKAGED MODULES

Bundled with NodeJS
Define dependencies ...
DEMO: MANAGING
DEPENDENCIES

NPM, NODE PACKAGED MODULES
MODERN DAY
JAVASCRIPT PROJECTS:
TEST, TEST, AND TEST
AGAIN
MODERN DAY JAVASCRIPT PROJECTS: TEST,
TEST, AND TEST AGAIN
TESTING YOUR JAVASCRIPT

Large number of frameworks for tests
A...
MODERN DAY JAVASCRIPT PROJECTS: TEST,
TEST, AND TEST AGAIN
TESTING YOUR JAVASCRIPT: QUNIT

Developed by jQuery
Unit Testin...
MODERN DAY JAVASCRIPT PROJECTS: TEST,
TEST, AND TEST AGAIN
TESTING YOUR JAVASCRIPT: JASMINE

BDD based framework
Resembles...
MODERN DAY JAVASCRIPT PROJECTS: TEST,
TEST, AND TEST AGAIN
TESTING YOUR JAVASCRIPT: MOCHA

BDD based framework
Resembles R...
DEMO: TEST, TEST, AND
TEST AGAIN
MOCHA
MODERN DAY
JAVASCRIPT PROJECTS:
BUILDING JAVASCRIPT
MODERN DAY JAVASCRIPT PROJECTS:
BUILDING JAVASCRIPT

WHY "BUILD" YOUR
JAVASCRIPT?

WE AREN'T REALLY BUILDING ANYTHING...AR...
MODERN DAY JAVASCRIPT PROJECTS:
BUILDING JAVASCRIPT

YOU ARE NOW.
MODERN DAY JAVASCRIPT PROJECTS:
BUILDING JAVASCRIPT

WHAT WE CAN TODAY DO TODAY WITH JAVASCRIPT
1.
2.
3.
4.

Get our sourc...
MODERN DAY JAVASCRIPT PROJECTS:
BUILDING JAVASCRIPT
SOME BUILDING SOLUTIONS

Travis-CI (Free for Open Source)
Jenkins
What...
DEMO: BUILDING
JAVASCRIPT
TRAVIS-CI
MODERN DAY JAVASCRIPT PROJECTS:
BUILDING JAVASCRIPT
GRUNT: THE JAVASCRIPT CLI TOOL

Open Source
Provides CLI to run common...
GRUNTJS.ORG
QUICK RECAP: THE PLAN
Why JavaScript?
Survival Skills for the New Age of JavaScript
Modern Day JavaScript Projects
Source ...
QUICK RECAP: THE POINT

TO ACCOMPLISH ONE OF THESE BEFORE YOU LEAVE:
To see some new JavaScript tools
To understand how a ...
QUICK RECAP: THE POINT
THEME FOR THIS PRESENTATION

TO SHOW YOU THAT
JAVASCRIPT IS A REAL
OPTION
NEXT STEPS
Where do we go from here?
NEXT STEPS
Go to the other JavaScript/HTML5 Presentations at PrDC
Make Your Own JavaScript Project
Leverage one of the too...
NEXT STEPS

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

FROM WINNIPEG, MANITOBA
SYSTEMS ANALYST, UNIVERSITY OF MANITOBA (FACULTY OF
MEDICINE)
MICROSOFT MVP, INTERNET...
DAVID WESST

@DAVIDWESST ON TWITTER
DAVIDWESST.COM ON THE WEB
DAVIDWESST.COM/BLOG ON THE BLOGOSPHERE
DW [AT] DAVIDWESST.CO...
JavaScript Revolution - 5/Nov/13 - PrDC Saskatoon, SK
JavaScript Revolution - 5/Nov/13 - PrDC Saskatoon, SK
Upcoming SlideShare
Loading in...5
×

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

1,165

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,165
On Slideshare
0
From Embeds
0
Number of Embeds
1
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×