THE JAVASCRIPTREVOLUTION

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

Prarie Dev Con 2013 - Saskatoon, SK

DAVID WESSTFROM WINNIPEG, MANITOBA

SYSTEMS ANALYST, UNIVERSITY OF MANITOBA (FACULTY OFMEDICINE)

MICROSOFT MVP, INTERNET EXPLORER

IE USER AGENT USERAGENTS.IE

PRODUCER, BREWPUB STUDIOS

DAVID WESST@DAVIDWESST ON TWITTER

DAVIDWESST.COM ON THE WEB

DAVIDWESST.COM/BLOG ON THE BLOGOSPHERE

DW [AT] DAVIDWESST.COM ON EMAIL

FOLLOW ALONGHTTP://DAVIDWESST.GITHUB.IO/DW-PRESENTATIONS

SLIDES AND DEMOS WILL BE POSTEDAFTERWARDS.

THE POINTTO ACCOMPLISH ONE OF THESE BEFORE YOU LEAVE:

To see some new JavaScript toolsTo understand how a JavaScript project can workTo bring you up-to-speed with JavaScript

THE POINTTHEME FOR THIS PRESENTATION

TO SHOW YOU THATJAVASCRIPT IS A REAL

OPTION

THE PLANA.K.A. THE AGENDA

Why JavaScript?

Survival Skills for the New Age of JavaScript

Modern Day JavaScript Projects

Source ControlJavaScript Code TodayManaging DependenciesTest, Test, and Test AgainBuilding JavaScript

Next Steps

THE PLANSETTING YOUR EXPECTATIONS

This presentation is...

An overview of JavaScript modern developmentA review of JavaScript development toolsA "core sample" of pure JavaScript developmentA taste of things to come for JavaScript at DevTeach

THE PLANSETTING YOUR EXPECTATIONS

This presentation is not...

A 100% code-centric presentationA lesson on JavaScript coding practicesA discussion on JavaScript ALM (Application LifecycyleManagement)A "deep-dive" into one or more specific JavaScripttechnologies

WHY JAVASCRIPT?

WHY JAVASCRIPT?COMMON ARGUMENTS ABOUT JAVASCRIPT

JAVASCRIPT IS FOR CLIENT-SIDE WEB DEVELOPMENT ANDNOTHING 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 NEEDJAVASCRIPT ANYWAY.

WHY JAVASCRIPT?

Image Source: Wikimedia Commons

JavaScript is for client-side web developmentand nothing else.

NOT QUITE...Web BrowsersChrome Installed Apps / Chromium AppsiOS, Windows Phone, Android (through PhoneGap)Windows 8Wii U

It's not an OO language, so I can't use it foranything.

ACTUALLY, IT IS.Prototype-based LanguageProvides properties, classes, polymorphism, etc...

I don't program for the web, so I don't needJavaScript anyway.

JAVASCRIPT LIVES OUTSIDE OF THE WEBWindows Store AppsChromium and Firefox AppsWii UPhoneGap

SURVIVAL SKILLS FORTHE NEW AGE OF

JAVASCRIPT

SURVIVAL SKILLS FOR THE NEW AGE OFJAVASCRIPT

OPEN SOURCE IS YOUR FRIEND

SURVIVAL SKILLS FOR THE NEW AGE OFJAVASCRIPT

PLAN AND CHOOSE YOUR PLATFORMS

SURVIVAL SKILLS FOR THE NEW AGE OFJAVASCRIPT

UNDERSTAND YOUR HTML5

SURVIVAL SKILLS FOR THE NEW AGE OFJAVASCRIPT

EXPLORE YOUR ENVIRONMENT(S)Eclipse (Web Platform Tools, Aptana, Nodeclipse)Visual Studio 2012/2013WebMatrixWebStormCloud9 (http://c9.io)

MODERN DAYJAVASCRIPT PROJECTS:

SOURCE CONTROL

HERE'S THE SECRET:

ANY SOURCE CONTROLWILL DO!

BUT IN CASE YOU ARE GOING OPEN SOURCEWITH YOUR PROJECT...

MODERN DAY JAVASCRIPT PROJECTS: SOURCECONTROL

A FEW CONSIDERATIONS FOR OPEN SOURCE PROJECTSVisibilityShare-abilityAccessibility

MODERN DAY JAVASCRIPT PROJECTS: SOURCECONTROL

SOME OPTIONSGithub (http://github.com)Bitbucket (http://bitbucket.org)CodePlex (http://codeplex.com)Google Code (http://code.google.com)

MODERN DAYJAVASCRIPT PROJECTS:

JAVASCRIPT CODE TODAY

MODERN DAY JAVASCRIPT PROJECTS:JAVASCRIPT CODE TODAY

COMPILERSProvide solution to some common "issues" with JavaScript

More familiar syntax than JavaScriptProvides common keywords like "class" and "interface"Compiles into optimized JavaScriptMakes OO programming easier to learn in JavaScript

MODERN DAY JAVASCRIPT PROJECTS:JAVASCRIPT CODE TODAY

COMPILERSPopular Examples

CoffeeScript - Ruby Like SyntaxTypeScript - Superset of JavaScriptFor more check out Altjs.org

DEMO: COMPILERSTYPESCRIPT

MODERN DAY JAVASCRIPT PROJECTS:JAVASCRIPT CODE TODAYMV* PATTERNS AND FRAMEWORKS

MVC, Model View ControllerMVVM, Model View ViewModelMVP, Model View Presenter

MODERN DAY JAVASCRIPT PROJECTS:JAVASCRIPT CODE TODAYMV* PATTERNS AND FRAMEWORKS

Backbone (http://backbonejs.org/)Knockout (http://knockoutjs.com/)AngularJS (http://angularjs.org/)

DEMO: MV* PATTERNSAND FRAMEWORKS

KNOCKOUTJS

MODERN DAY JAVASCRIPT PROJECTS:JAVASCRIPT CODE TODAY

ON THE SERVER WITH NODEJSRuns JavaScript on the ServerOpen Source TechnologyProvides Asynchronous I/O, i.e. Non-Blocking I/O

DEMO: ON THE SERVERWITH NODEJS

WALKING THROUGH NODEJS

MODERN DAYJAVASCRIPT PROJECTS:

MANAGINGDEPENDENCIES

MODERN DAY JAVASCRIPT PROJECTS:MANAGING DEPENDENCIES

REQUIREJSAllows you to define and load JavaScript modulesRemoves need for "script" tags to define dependenciesRuns JavaScript ONLY when dependencies are loaded

DEMO: MANAGINGDEPENDENCIES

REQUIREJS

MODERN DAY JAVASCRIPT PROJECTS:MANAGING DEPENDENCIES

NPM, NODE PACKAGED MODULESBundled with NodeJSDefine dependencies through package name or git repoThrows errors when dependencies are not loaded properlyDefine dependencies in package.json

DEMO: MANAGINGDEPENDENCIES

NPM, NODE PACKAGED MODULES

MODERN DAYJAVASCRIPT PROJECTS:TEST, TEST, AND TEST

AGAIN

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

TESTING YOUR JAVASCRIPTLarge number of frameworks for testsApply TDD or BDD PracticesMocking frameworks exist as wellAvailable for both client and server

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

TESTING YOUR JAVASCRIPT: QUNITDeveloped by jQueryUnit Testing FrameworkNo external dependencies (not even jQuery)

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

TESTING YOUR JAVASCRIPT: JASMINEBDD based frameworkResembles RSpecNo external dependenciesProvides multiple output channels for results

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

TESTING YOUR JAVASCRIPT: MOCHABDD based frameworkResembles RSpecWorks with both client and server (NodeJS)

DEMO: TEST, TEST, ANDTEST AGAIN

MOCHA

MODERN DAYJAVASCRIPT PROJECTS:BUILDING JAVASCRIPT

MODERN DAY JAVASCRIPT PROJECTS:BUILDING JAVASCRIPT

WHY "BUILD" YOURJAVASCRIPT?

WE AREN'T REALLY BUILDING ANYTHING...ARE WE?

MODERN DAY JAVASCRIPT PROJECTS:BUILDING JAVASCRIPT

YOU ARE NOW.

MODERN DAY JAVASCRIPT PROJECTS:BUILDING JAVASCRIPT

WHAT WE CAN TODAY DO TODAY WITH JAVASCRIPT1. Get our source2. Compile it (from TypeScript)3. Setup dependencies4. Test it

MODERN DAY JAVASCRIPT PROJECTS:BUILDING JAVASCRIPT

SOME BUILDING SOLUTIONSTravis-CI (Free for Open Source)JenkinsWhatever you want to execute CLI commands

DEMO: BUILDINGJAVASCRIPT

TRAVIS-CI

MODERN DAY JAVASCRIPT PROJECTS:BUILDING JAVASCRIPT

GRUNT: THE JAVASCRIPT CLI TOOLOpen SourceProvides CLI to run common project actionsAllows you to define custom CLI actions

GRUNTJS.ORG

QUICK RECAP: THE PLAN

Why JavaScript?

Survival Skills for the New Age of JavaScript

Modern Day JavaScript Projects

Source ControlJavaScript Code TodayManaging DependenciesTest, Test, and Test AgainBuilding JavaScript

Next Steps

QUICK RECAP: THE POINTTO ACCOMPLISH ONE OF THESE BEFORE YOU LEAVE:

To see some new JavaScript toolsTo understand how a JavaScript project can workTo bring you up-to-speed with JavaScript

QUICK RECAP: THE POINTTHEME FOR THIS PRESENTATION

TO SHOW YOU THATJAVASCRIPT IS A REAL

OPTION

NEXT STEPSWhere do we go from here?

NEXT STEPSGo to the other JavaScript/HTML5 Presentations at PrDCMake Your Own JavaScript ProjectLeverage one of the tools in your exiting projectsBuild a JavaScript Project

NEXT STEPSCHECK OUT A RESOURCE

Douglas Crockford's BlogJavaScript: The Good PartsCheckout the npm (http://npmjs.org)

DAVID WESSTFROM WINNIPEG, MANITOBA

SYSTEMS ANALYST, UNIVERSITY OF MANITOBA (FACULTY OFMEDICINE)

MICROSOFT MVP, INTERNET EXPLORERIE USER AGENT USERAGENTS.IE

PRODUCER, BREWPUB GAMES

DAVID WESST@DAVIDWESST ON TWITTER

DAVIDWESST.COM ON THE WEB

DAVIDWESST.COM/BLOG ON THE BLOGOSPHEREDW [AT] DAVIDWESST.COM ON EMAIL