"Sorting out the JS Mess" was the title of my sample presentation I led at @Red Academy, talking about how the history of the development workflow with Javascript and how it influences what tools, libraries and steps we take to develop web and mobile apps. I featured a demo using React, and discussed Angular 2, JQuery, Meteor, and other Javascript libraries and frameworks from the context of my development experience.

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

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

4. WHAT THE HECK HAPPENED TO JS?
• THIS POORLY TYPED LANGUAGE CALLED
JAVASCRIPT TURNED INTO A MONSTROSITY
• FINDING INFORMATION ABOUT ANYTHING JS
WOULD LEAD YOU TO A BLOG POST THAT WAS
INSTANTLY DATED
• IT LOOKED LIKE JAVASCRIPT WENT CRAZY, AND I
NEEDED TO TAKE A PILL

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

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

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

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

9. THEN…
WHAT THE HECK HAPPENED?

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

11. ELSEWHERE…
• IN THE JAVASCRIPT WORLD…
• 2005 – AJAX WHITE PAPER
• GOOGLE MAPS GOES LIVE! AND INTRODUCES
“GOOGLE BETA” I.E. FOREVER
• HTTP://WWW.JOHNNYCASHHASBEENEVERYWHE
RE.COM/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

26. FIRST … TIME TO CLEAN SWEEP
EVERYTHING

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

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

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

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

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

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

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

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

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

36. UTILIZING “FUNCTIONAL PROGRAMMING”
• A METAPHOR ILLUSTRATING
ABSTRACTION
• FUNCTIONAL PROGRAMMING
INVOLVES CLEVER USE OF
ABSTRACTION TO REDUCE
UNNEEDED CODE

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

38. ADDITIONAL OPTIONS
• ZEPTO – WORKS WELL WITH JQUERY
• RIOT – A MINI VERSION OF REACT
• VUE – LIKE ANGULAR / EMBER

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

40. THANK YOU. QUESTIONS?
EMAIL - EDWARD.APOSTOL AT REDACADEMY DOT COM
WWW.REDACADEMY.COM
TWITTER - @EDWARDJAPOSTOL