"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.
Call Girls in Prashant Vihar, Delhi đŻ Call Us đ9953056974 đ Escort Service
Â
Choosing Javascript Libraries to Adopt for Development
1.
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
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
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
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
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!
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