Staying Sane (dot) JS

Some things change very often, others not so much. Libraries come and go, but the JavaScript language has stayed consistent. In this talk I will highlight some techniques used at Code School for teaching and internal development that keeps us sane & safe from rewriting courses every two weeks.

Watch this talk: https://youtu.be/WP8oEhFXhZs

Transcript

2. Staying Sane (dot) JS JavaScript is changing, but you don't have to freak out. Staying Sane (dot) JS Presented by: Sergio Cruz @hashtagserg
3. Staying Sane (dot) JS Writing JavaScript Might feel a bit like this these days /
4. Why This Talk is Important Articles like “How it feels to learn JavaScript in 2016”1 keep popping up. Other articles like “Everything is fine with JavaScript”2 rise in response. These titles are representative of the amount of disparity between both groups. Staying Sane (dot) JS 1. https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f 2. http://www.macwright.org/2016/10/04/everything-is-fine-with-javascript.html
5. The Year Is 2009 A lot is happening this year… Staying Sane (dot) JS
6. Staying Sane (dot) JS Barack Obama is inaugurated as the 44th President of the United States
7. Staying Sane (dot) JS The movie ”Avatar” is released and wins The Academy Awards in three categories
8. Staying Sane (dot) JS “I Gotta Feeling” by The Black Eyed Peas reaches #1 on the US charts
9. Staying Sane (dot) JS Node.js makes a dent in the universe by allowing JS to be run on the server-side
10. Staying Sane (dot) JS Node.js opened up JavaScript to all new purposes, such as building robots and controlling drones
11. Node Rockets at JSConf 2015
12. Staying Sane (dot) JS // Node.js Hello World var http = require('http'); var server = http.createServer(/*...*/); server.listen(8000); wait, this is new ...and just like that we got Modules !
13. Staying Sane (dot) JS Two Ways of Creating Modules Local Files We can write new local files
 and include them as needed / Package Manager We can use a package manager called npm to get dependencies npm install underscore // using the module: var _ = require('underscore'); var foo = require('./hello'); // includes contents from // a file called “hello.js”
14. Staying Sane (dot) JS Two Ways of Creating Modules npm install underscore // using the module: var _ = require('underscore'); wait, this is also new ...and just like that we got a Package Manager "
15. In 2009 we got Node.js and: Staying Sane (dot) JS Quick Recap • Obama, Avatar Movie and “I Gotta Feeling” • JavaScript Modules by using require(‘package’) • Package Manager for Node called npm • #thanksObama ! "
17. The State of the Front-End Lots of features were brought to Node.js, but what’s up with the front-end? Staying Sane (dot) JS
18. Staying Sane (dot) JS some time passed since node... And front-end developers started wishing they could take advantage of the awesomeness behind Node.js ! " #
19. Staying Sane (dot) JS That’s when module loaders like Browserify came to existance ! + $ = ♥ hurray for modules in the browser!
20. Staying Sane (dot) JS ES2015 was released and developers wanted to use it right away then some more time passed... but the browsers wouldn’t let them yet
21. Staying Sane (dot) JS That’s when transpilers like Babel became a common practice & Transpilers help browsers understand tomorrow’s code today
22. Staying Sane (dot) JS then we had another problem: How to make all these things work together?
23. Staying Sane (dot) JS So Task Runners like Gulp came to the rescue ' Task Runners help automate some repetitive tasks such as transpiling
24. Staying Sane (dot) JS ' ! " Package Manager Task Runners Module Loader Current Glossary & Transpiler
25. Staying Sane (dot) JS ' ! " Package Manager Task Runners Module Loader & Transpiler Browserify, Webpack, System.js npm, jspm, yarn Babel, TypeScript Gulp, Grunt, Broccoli yarn is brand new
26. Why so much change? What are we gaining? - Literally everyone. Staying Sane (dot) JS I am often asked:
27. We're gaining a lot of things We're pushing the barriers of the language like never before Staying Sane (dot) JS What are we gaining? • Module System • ES2015+ that works in today's browsers • More things are now possible: • Module Splitting & Tree shaking • Universal Rendering (server & client)
28. How can any of this help me stay sane while writing JavaScript apps?
29. Staying Sane (dot) JS Libraries come and go, but great development practices will stay great.
30. Stay in the Language JavaScript itself is still the safest bet Staying Sane (dot) JS
31. From Babel to TypeScript I recently upgraded an app from Angular 1 to Angular 2. Staying Sane (dot) JS Stay in the Language • Used two Babel plugins: • Object rest spread transform: { …object } • Add Module Exports: make import foo from 'foo'; work with CommonJS • Had to update 22 files removing unsupported TypeScript features, want to guess which features? &
32. Staying Sane (dot) JS I can't blame the TypeScript compiler for not supporting those features. They aren't part of the language spec
 (although object spread is an active proposal).
33. Consider Your Tradeoffs Consider the risks you are taking on when making technology choices. Ask yourself: Staying Sane (dot) JS Stay in the Language • What if I decide to transpile my code differently? • What if I have to change my current framework of choice?
34. Staying Sane (dot) JS Leaning on the language itself will decrease the risk dramatically.
35. Staying Sane (dot) JS How to find a good balance between shiny new tools and the tried and true? There is a rule of thumb I would like to propose.
36. Separation of Concerns How it can help us stay sane. Staying Sane (dot) JS
37. What do you mean by
 Separation of Concerns? In software, it is generally understood that it is not a good idea to have any single part of your code having too much responsibility. Staying Sane (dot) JS
38. Day-to-Day Examples in Web: Staying Sane (dot) JS Separation of Concerns High level
 HTML for markup, CSS for styling Code organization
 Break code into small modules that work together App development
 View logic shouldn't need to know how to fetch remote data !
39. The interpretation might change Staying Sane (dot) JS Separation of Concerns • Angular and other MVC-style frameworks separated view and logic code into separate files. • React, known for "Reinventing Best Practices", thought that the logic that accompanied view files belonged together. • Regardless of how view-related code is produced, business logic still needs to be separate.
40. Staying Sane (dot) JS Using React? Presentation Components should not make Ajax calls directly. Modularize app instead. Using Angular? Use DI system to inject services that fetch data from remote servers or even from local storage. Using Express? Don't execute database queries directly in your route functions, wrap that in a method instead. Practical advice
41. Staying Sane (dot) JS Here are a couple of different ways we can put this to practice.
42. Module Systems Build systems like Browserify and Webpack
 are here to stay. Staying Sane (dot) JS !
43. ES Modules: A Language Spec Starting with ES2015, isolating code into module files is supported by the JavaScript language spec itself (not just in Node.js). Module Systems • Use module syntax everywhere: import moduleName from './file-name' • Regardless of how app is built, this is now a standard understood by all major build systems • Want to switch from Browserify to Webpack? No problem, no need to touch the application code (in an ideal world) • How about adding TypeScript to the project? Sure thing, boss
44. Advantages of Separating Concerns Separation of Concerns in practice helping us at different levels Staying Sane (dot) JS Module Systems • Build process is not part of app code, easily changeable • We can bring in dependencies on a per-need basis • Want to share modules between Node.js apps, React apps, and even React Native apps? No problem, just import them in.
45. Application Code Isolating code related to fetching remote data is always a good idea. Staying Sane (dot) JS
46. Fetching Data on the Front-end Making Ajax calls and reading cookies are common practices on the front-end. Isolate that logic and change frameworks freely. Staying Sane (dot) JS Application Code • Worried Angular 3 will break everything again? Isolate data access layers into your own modules. • Ideally, you'll want to import a file that contains all the logic regarding making Ajax calls, or reading cookies from any UI frameworks.
47. Fetching Data on the Back-end It is common to access database records while using Node.js. Isolate that code as to freely change server-side frameworks. Staying Sane (dot) JS Application Code • Want to switch from Express to something else? Minimize amount of work by isolating database calls and reusing from different frameworks. • Tools like Sequelize or Mongoose help isolate database models, and are commonly understood by different frameworks.
48. What's the next popular framework? I dunno! But great development practices
 will never go out of style. Staying Sane (dot) JS
49. Staying Sane (dot) JS But what if we were able to kept porting our business logic code from framework to framework over the years?
50. Wouldn't it be cool to reuse a bunch of agnostic code in a brand new platform like a JavaScript-powered smart watch or something? Staying Sane (dot) JS Yep, that'd be great!
51. Staying Sane (dot) JS Do your best to isolate the rendering logic from the rest of your app Then take the same approach to everything else
52. Staying Sane (dot) JS Master the Ecosystem ' ! " & Frameworks might change fast, but the ecosystem does not.
 You can (usually) trust it. Explain better what I mean by ecosystem Add logos of NPM, Gulp, etc (will always need a module loader, a transpiler, etc)
53. Staying Sane (dot) JS ' ! " & Package Manager Task Runners Module Loader Transpiler JavaScript Ecosystem
54. Thank You! Presented by: Sergio Cruz @hashtagserg Staying Sane (dot) JS JavaScript is changing, but you don't have to freak out.