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
Top Related