Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
JavaScript Revolution - 5/Nov/13 - PrDC Saskatoon, SK
1.
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
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
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.
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
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)
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)
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
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/)
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
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
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
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)
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
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
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
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