HOW DID I GET HERE• IN MID 2010, I WAS MIRED IN MOBILE

• WORKING ON PROJECTS IN “ADOBE AIR” AND “OBJECTIVE C”

• FREELANCING, I BRIEFLY JOINED THE CBC

• WORKED ON KIDS GAMES

WHAT THE HECK HAPPENED TO JS?• SO I HAD TO JUMP BACK INTO JAVASCRIPT

• SOMETHING I HAD NOT DONE IN QUITE SOME TIME

• I TAUGHT JAVASCRIPT BACK IN THE DOT-COM HEYDAY

• BUT IT WAS STILL A ‘KIDDIE-SCRIPT’ LANGUAGE

• I WENT TO DO SOME SERVER-SIDE CODE

WHAT THE HECK HAPPENED TO JS?• THIS POORLY TYPED LANGUAGE CALLED

JAVASCRIPT TURNED INTO A MONSTROSITY

• FINDING INFORMATION ABOUT ANYTHING JSWOULD LEAD YOU TO A BLOG POST THAT WAS INSTANTLY DATED

• IT LOOKED LIKE JAVASCRIPT WENT CRAZY, AND I NEEDED TO TAKE A PILL

SO THAT LEADS ME TO NOW…• LET’S TALK ABOUT THE TOOLSETS AVAILABLE

TODAY IN THE 2016 JAVASCRIPT WORLD

• LET’S TALK ABOUT THE EVALUATION PROCESSES THAT HELP CHOOSE THE JAVASCRIPT TECHNOLOGIES YOU CAN USE

• LET’S PERHAPS EVEN TAKE A LOOK AT A SIMPLE USE CASE

BUT HOW DID WE GET HERE?A LITTLE HISTORY WOULD BE NICE…

THE STORY SO FAR..• 1995 – I’M A YOUNG PHARMACY STUDENT / ”HACKER”. EXPLORING THIS NEW WORLD CALLED THE “WORLD

WIDE WEB”. • 1995 – IN THAT SAME YEAR, WITHIN TEN DAYS, BRENDAN EICH OF NETSCAPE CREATES A LANGUAGE CALLED

“MOCHA”• CHANGED THE NAME TO LIVESCRIPT• THEN CHANGED IT TO JAVASCRIPT (TO TAKE ADVANTAGE OF THE RISING POPULARITY OF SOME OTHER LANGUAGE

CALLED…JAVA)

• JAVASCRIPT THEN CONFORMED TO THE ECMASCRIPT (EUROPEAN COMMUNITY MANUFACTURING ASSOCIATION)

THE STORY SO FAR..

• 1998 – JAVASCRIPT 1.3/ ECMASCRIPT V1 (ECMA-262) STANDARD CREATED• INCIDENTALLY, THE VERSION I HAD BEEN USING FOR YEARS…• ALSO THAT YEAR, JAVASCRIPT 1.4 (SERVER SIDE JS!) RELEASED …WAITAMINIT… ISN’T THAT … NODE.JS?

• 2000 – JAVASCRIPT 1.45/ ECMASCRIPT V3 OS RE;ASED

THEN…WHAT THE HECK HAPPENED?

FIGHT!• PLUGINS RELEASED EVERYWHERE FOR NON-

TRIVIAL INTERACTIVTY• FLASH, JAVAFX, SILVERLIGHT

• FLASH AS3 WAS SUPPOSED TO BE THE EVOLUTION OF ECMASCRIPT V4

• THE RESULT WAS ECMASCRIPT V5 …

10 YEARS LATER!And THE MATRIX didn’t get much better as it progressed.

ELSEWHERE…• IN THE JAVASCRIPT WORLD…

• 2005 – AJAX WHITE PAPER• GOOGLE MAPS GOES LIVE! AND INTRODUCES

“GOOGLE BETA” I.E. FOREVER

• HTTP://WWW.JOHNNYCASHHASBEENEVERYWHERE.COM/

ELSEWHERE…• IN THE JAVASCRIPT WORLD…

• 2006 – THE BIRTH OF JAVASCRIPT “LIBRARIES”• JQUERY, MOOTOOLS, PROTOTYPE, DOJO, YUI, ETC.

ETC.• MADE WORKING WITH THE DOM EASIER• INTRODUCES “PROGRAMMING PATTERNS” TO JS

– OBSERVABLES, PROMISES, ETC.

AND THEN CAME NODE.JS (AND NPM)• 2009 – NODEJS CAME OUT• POWERED BY GOOGLE'S V8 SCRIPTING ENGINE FOR

WEBKIT ( I COULD HAVE HAD A … )• INCLUDES ”ASYNC I/O”• JS IS RESURRECTED ON THE SERVER…ERR…

ANYWHERE!

• 2011 – NPM RELEASED• PACKAGE MANAGER FOR JS• ORGANIZES LIBRARIES IN A DEPENDENT MANNER• I WAS AT THE CBC, KIND OF OBLIVIOUS TO IT ALL

THE “JAVASCRIPT” MATRIX WAS CREATEDAND WOW….AT LEAST IT WAS A BIT MORE ORGANIZED.

MODULE EXPLOSION• NPM HAS AN EASY PUBLISHING PROCESS

• LITTLE GATEKEEPING (GOOD ? BAD ?) –COMPARE TO APP STORE FOR IOS

• MASSIVE OVERLAP

• QUALITY OF EACH MODULES VARIES

MANY MODULES FORM A PACKAGE…JUST IN CASE YOU ARE WONDERING…

JAVASCRIPT – MORE THAN FUNCTIONS• JAVASCRIPT IS USED FOR RUNNING TOOLS THAT

HELP SCAFFOLD YOUR SITE• ”SCAFFOLDING” – CONCERNED WITH GENERATING A

STARTER TEMPLATE FOR APP BUILDING, BASED UPON SOM SETTINGS• YEOMAN, SLUSH

• SCAFFOLDS REDUCE TIME IN SETTING UP BOILERPLATE CODE FOR YOUR WEB APP, DOWNLOADING DEPENDENCIES, AND MANUALLY CREATING A FOLDER STRUCTURE.

JAVASCRIPT – MORE THAN FUNCTIONS• JAVASCRIPT IS USED FOR RUNNING TOOLS THAT HELP

TRANSPILE YOUR SITE’S CODE

• ”TRANSPILING” – TAKING SOURCE FROM ONE LANGUAGE AND CONVERTING IT TO ANOTHER WITH THE SAME DEGREE OF ABSTRACTION• COFFEESCRIPT, TYPESCRIPT, DART, BABEL, CLOJURESCRIPT

• TRANSPILING ALLOWS A WEB DEVELOPER TO WRITE SOPHISTICATED, WELL MANAGED JS CODE THAT FOLLOWS BEST PRACTICES FOR PROGRAMMING

JAVASCRIPT – MORE THAN FUNCTIONS• JAVASCRIPT IS USED FOR RUNNING TOOLS THAT

HELP BUILD YOUR SITE FOR PRODUCTION• ”BUILDING” – AUTOMATION TOOLS THAT PERFORM

REPEATED TASKS IN A PROJECT, EX. MINIFICATION, INJECT DEPENDENCIES• GRUNT, GULP, WEBPACK, BRUNCH, ETC.

• BUILD TOOLS SAVE TIME, MONEY, AND RESOURCES BY PERFORMING REPEATABLE TASKS – LIKE MINIFYING JS AND CSS

JAVASCRIPT – MORE THAN FUNCTIONS• JAVASCRIPT IS USED FOR RUNNING TOOLS THAT

HELP TEST YOUR SITE’S FUNCTIONS

• ”TESTING” – UNIT TESTING ASSERTION LIBRARIES THAT CONFIRM FUNCTIONS WORK• UNITJS, MOCHA, JASMINE, KARMA, PROTRACTOR

SO…ANGULAR? REACT? OTHERS? (EMBER)• ANGULAR 2 (PUT ASIDE ANGULAR JS FOR NOW)• STRUCTURAL FRAMEWORK FOR DYNAMIC WEB

APPS• HTML IS THE TEMPLATE LANGUAGE• EXTENDS HTML, AND UTILIZES TYPESCRIPT, AND

ADVANCED VERSION OF ECMASCRIPT

SO…REACT? ANGULAR? OTHERS? (EMBER)• REACTJS (LET’S PUT ASIDE REACT NATIVE FOR

NOW)• FOCUSED ON CREATING FRONT-END

COMPONENTS • UNLIKE ANGULAR(2) DOES NOT REALLY HAVE A

“MODEL” OR “CONTROLLER” LOGIC• UTILIZES JSX, A VARIATION ON JAVASCRIPT THAT

IS “TRANSLATED” FROM A VIRTUAL DOM TO REGULAR JAVASCRIPT

SO…EMBER? (VS. THE OTHER TWO)• EMBER IS A JAVASCRIPT WEB FRAMEWORK• IN SOME WAYS, SIMILAR TO ANGULAR

(COMPLETE MODEL/VIEW/VIEWMODEL PATTERN)• IN SOME WAYS SIMILAR TO REACTJS

(COMPONENT BASED WORKFLOW)• STRICTLY ABOUT THE FRONT-END AS WELL…

BUT WAITAMINIT…. How about METEOR?????

OK…METEOR THEN• METEORJS IS AN OPEN SOURCE JAVASCRIPT WEB

FRAMEWORK AS WELL• BUT CENTERED AROUND NODEJS

• WHICH MEANS• IT CAN PERFORM “SERVER-SIDE” LIKE TASKS

• AS WELL AS• PERFORMING FRONT-END UI TASKS

• SO IT CROSSES BEYOND THE PREVIOUS THREE!• AND UTILIZES APACHE CORDOVA /APACHE PHONEGAP

FOR MOBILE SUPPORT

COMING SOON TO A JS WORLD NEAR YOU!• ASM.JS – BECAUSE YOU WANT TO WRITE COMPILE IT TO C, C++, LUA, RUBY, PYTHON ETC. AND COMPILE

IT OVER TO JAVASCRIPT AND USE IT FOR THE APPROPRIATE MEDIA (WEB, TABLET, ETC.)• ECMASCRIPT 2015 / V6 (ES6 – RED ACADEMY TEACHES THIS IN THE HERE IN NOW. CREATE MODULES!

NEW (WELL ALMOST NEW) SYNTAX!• WEB COMPONENTS - A STANDARD SET OF REUSABLE USER INTERFACE WIDGETS CREATED USING OPEN

WEB TECHNOLOGY, AND ARE BAKED INTO THE BROWSER, SO WE DON’T NEED LIBRARIES LIKE JQUERY OR DOJO• HTTP/2 – BECAUSE REVISING HTTP IS REALLY REALLY NEEDED

FIRST … TIME TO CLEAN SWEEP EVERYTHING

ONE RING (UNFORTUNATELY) MAY NOT RULE THEM ALL…• WHAT TYPE OF APP ARE YOU BUILDING

• WHERE IS THE APP EXPECTED TO RUN?

• WHY USE KNOWN (OR UNKNOWN) TECHNOLOGIES

• HOW LARGE WILL BE YOUR EXPECTED CODEBASE?

• WHO IS YOUR EXPECTED AUDIENCE

• WHEN IS THE PROJECT BEING DEPLOYED

IT’S NOT JUST TECHNICAL CONCERNS• IT AFFECTS• WHO YOU HIRE• SALARY MANAGEMENT (DIFFERENT

TECHNOLOGIES -> DIFFERENT COSTS)• TEAM MORALE (USING AN ANCIENT TECHNOLOGY

THAT IS DATED MIGHT NOT GET THE BEST EFFORT OUT OF YOUR STAFF)• NEW TECHNOLOGY = ADDITIONAL TRAINING

GET TO KNOW ES6 (AND MAYBE ES7) AND TRANSPILING• TRANSPILING IS GOOD BECAUSE• IT IS BEST OF BREED PROGRAMMING• ENFORCES STRONG TYPING• IMPROVED SYNTAX• SUPPORTS DOMAIN SPECIFICITY (HAS SPECIFIC

CONCERNS AND FOCUS)

• TRANSPILING IS NOT GOOD BECAUSE• MORE COMPLEX TOOLING AND SETUP• LONGER RAMP-UP • THE DEGREE OF IMPLEMENTATION OF ES6 TO ES5

CAN VARY FROM CODER TO CODER

ReactJS and Angular2 use a form of transpilation

The common choice is transpiling ES6 via Babel

UTILIZE THE BEST TOOLING• TOOLING IS THE PROCESS OF SELECTING THE

TOOLS, UTILITIES AND LIBRARIES THAT WHEN COMBINED BUILDS YOUR CODE TO BE USED IN THE WEB BROWSER

• GREAT CHOICES IN “TOOLING” WILL IMPACT THE DEVELOPMENT PROCESS, FINANCIAL SPENDING, AND CAN MAKE CLIENTS AND DEVS HAPPY

UTILIZE THE BEST TOOLING• THE QUICKER YOU CAN GO FROM CODE TO PREVIEWING

(“QUICKER FEEDBACK LOOPS”) MAKES THE PROCESSING OF DEVELOPING MORE ENJOYABLE• EX. USING “HOT RELOADERS”, OR IDES THAT SUPPORT

QUICK PREVIEW

• AUTOMATE ALL THINGS IF POSSIBLE• BOOTSTRAPPING (TO AUTO DOWNLOAD LIBRARIES)• SOURCEMAPS – MAPS THAT POINT FOR TRANSPILED CODE

TO POINT BACK TO ORIGINAL SOURCE

UTILIZE THE BEST TOOLING• AUTOMATE YOUR TESTING PROCESSES

• AUTOMATE THE DEPLOYMENT

• DOCUMENT ALL TOOLS (CREATE AN INTERNAL BLOG)

• BETWEEN GRUNT, GULP, WEBPACK AND BRUNCH…THE CURRENT TREND IS WEBPACK! TO HELP IMPLEMENT TOOLING AUTOMATION

WHAT IS THE PHILOSOPHY OF CHOICE• WHAT IS THE PROBLEM THAT THE LIBRARY IS

TRYING TO SOLVE?

• CAN THE LIBRARY AUTHORS ITS USAGE SIMPLY?

• WHAT IS THEIR REASONING OR INSPIRATION BEHIND THE LIBRARY’S CREATION?

• WOULD THEY SOLVE YOUR PROBLEMS?

• WILL THIS LIBRARY WORK WELL WITH OTHERS?

SMALL PIECES VS MONOLITHIC FRAMEWORKS• LARGE FRAMEWORKS ARE GENERALLY

CONSISTENT ALL THE TIME

• ONE SOURCE OF CENTRALIZED DOCUMENTATION

• MAY BE A LARGER MENTAL PROCESS TO UNDERSTAND IT ALL, BUT IT’S A UNIFIED ENVIRONMENT

• SMALL PIECES ARE A “PICK AND CHOOSE “PROCESS

• DOCUMENTATION MAY BE SMALL, BUT FRAGMENTED IN MANY PLACES

• WIDER NUMBERS OF TOOLS BECOMES MAYBE A LITTLE BIT CHALLENGING

HOW MUCH INFORMATION IS OUT THERE?• WEBSITE BLOGS – OUT OF DATE• VIDEO TUTORIALS – OUT OF DATE• BOOKS – OUT OF DATE• MY EXPERIENCE WITH GETTING THE INFORMATION NEEDED ALL TOGETHER• WHILE CODING – CAN YOU READ THE UNIT TESTS (ARE YOU DOING UNIT TESTS?)• FOLLOW ONE PARTICULAR RESOURCE / METHODOLOGY TO START (LIKE THE ORIGINAL DOCS)• USE TUTORIALS ONLY AS GUIDES…KNOWING THAT THEY MAY TEND TO CHANGE…AND BREAK

• USE SITES LIKE STACKOVERFLOW IF YOU ARE STUCK. BUT LIKE ANY BLOGS ITS USER BEWARE!

UTILIZING “FUNCTIONAL PROGRAMMING”• A METAPHOR ILLUSTRATING

ABSTRACTION

• FUNCTIONAL PROGRAMMINGINVOLVES CLEVER USE OF ABSTRACTION TO REDUCE UNNEEDED CODE

FUNCTIONAL PROGRAMMINGBEFORE AFTER

Let’s create a function that goes and prints the elements of an array. How can we ‘shorten it’?

ADDITIONAL OPTIONS• ZEPTO – WORKS WELL WITH JQUERY

• RIOT – A MINI VERSION OF REACT

• VUE – LIKE ANGULAR / EMBER

DON’T STOP LEARNING

• REALLY, IF YOU ARE IN THIS ENVIRONMENT, YOU CAN’T STOP

• THE ONLY WAY TO BREAK THIS CYCLE…IS BECOME A FIREMAN (OR A YOGA TEACHER, OR SOMETHING EQUIVALENT TO A 180 DEGREE CAREER MOVE)

• KEEP ON CONTINUING TO LEARN

THANK YOU. QUESTIONS?

EMAIL - EDWARD.APOSTOL AT REDACADEMY DOT COM

WWW.REDACADEMY.COM

TWITTER - @EDWARDJAPOSTOL