Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Choosing Javascript Libraries to Adopt for Development

147 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Choosing Javascript Libraries to Adopt for Development

  1. 1. 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
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. BUT HOW DID WE GET HERE? A LITTLE HISTORY WOULD BE NICE…
  6. 6. 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)
  7. 7. 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
  8. 8. THEN… WHAT THE HECK HAPPENED?
  9. 9. 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.
  10. 10. 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/
  11. 11. 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.
  12. 12. 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
  13. 13. THE “JAVASCRIPT” MATRIX WAS CREATED AND WOW….AT LEAST IT WAS A BIT MORE ORGANIZED.
  14. 14. 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
  15. 15. MANY MODULES FORM A PACKAGE… JUST IN CASE YOU ARE WONDERING…
  16. 16. 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.
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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?????
  23. 23. 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
  24. 24. 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
  25. 25. FIRST … TIME TO CLEAN SWEEP EVERYTHING
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. 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?
  33. 33. 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
  34. 34. 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!
  35. 35. UTILIZING “FUNCTIONAL PROGRAMMING” • A METAPHOR ILLUSTRATING ABSTRACTION • FUNCTIONAL PROGRAMMING INVOLVES CLEVER USE OF ABSTRACTION TO REDUCE UNNEEDED CODE
  36. 36. FUNCTIONAL PROGRAMMING BEFORE AFTER Let’s create a function that goes and prints the elements of an array. How can we ‘shorten it’?
  37. 37. ADDITIONAL OPTIONS • ZEPTO – WORKS WELL WITH JQUERY • RIOT – A MINI VERSION OF REACT • VUE – LIKE ANGULAR / EMBER
  38. 38. 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
  39. 39. THANK YOU. QUESTIONS? EMAIL - EDWARD.APOSTOL AT REDACADEMY DOT COM WWW.REDACADEMY.COM TWITTER - @EDWARDJAPOSTOL

×