treating framework fatigue with...
TRANSCRIPT
![Page 1: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/1.jpg)
Treating Framework Fatigue With JavaScript
Tim DohertySoftware Architect
TimCDoherty timdoherty.net/in/timdoherty
![Page 2: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/2.jpg)
TimCDoherty
![Page 3: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/3.jpg)
???
TimCDoherty
![Page 4: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/4.jpg)
Hey, this one looks cool!TimCDoherty
![Page 5: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/5.jpg)
You May Suffer From Framework Fatigue
TimCDoherty
![Page 6: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/6.jpg)
Symptoms
TimCDoherty
![Page 7: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/7.jpg)
ConfusionTimCDoherty
![Page 8: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/8.jpg)
• One-way reactive data flow
• Two-way data binding
• Micro-frameworks
• Virtual DOM
• Extensible HTML
• Decoupled, event-driven architecture
• MVC, MVP, MVW, MVVM, MV???
TimCDoherty
![Page 9: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/9.jpg)
AmbivalenceTimCDoherty
![Page 10: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/10.jpg)
https://twitter.com/jesterxl/status/598885321808424960TimCDoherty
![Page 11: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/11.jpg)
• Another framework? Seriously?
• Mine’s The Right Framework™, who cares?
• My framework does the job, why do I need The Right Framework™?
• Do I even need a framework?
TimCDoherty
![Page 12: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/12.jpg)
SkepticismTimCDoherty
![Page 13: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/13.jpg)
• “3x to 5x faster on initial render and re-render scenarios”
• “More powerful than Backbone and faster or more flexible than React, Meteor, and AngularJS”
• “…faster than you ever thought possible.”
• “…a simpler programming model and better performance.”
• “More productive out of the box”
• “The most powerful, flexible and forward-looking JavaScript client framework in the world"
TimCDoherty
![Page 14: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/14.jpg)
Reduced Capacity for Hype and Marketing Lingo
TimCDoherty
![Page 15: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/15.jpg)
• “A Javascript Framework for Building Brilliant Applications”
• “Superheroic JavaScript MVW Framework”
• “Designed with developer ergonomics in mind, its friendly APIs help you get your job done—fast”
• “A next gen JavaScript client framework for mobile, desktop and web that leverages simple conventions to empower your creativity"
• “Simplify dynamic JavaScript UIs with the Model-View-View Model (MVVM) pattern”
• “Declarative component sugar for event-driven RequireJS apps”
• “Intuitive, Fast and Composable MVVM for building interactive interfaces”
• “A highly modular, loosely coupled, non-frameworky framework for building advanced JavaScript apps”
TimCDoherty
![Page 16: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/16.jpg)
TimCDoherty
![Page 17: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/17.jpg)
Treatment
TimCDoherty
![Page 18: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/18.jpg)
Go NativeTimCDoherty
![Page 19: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/19.jpg)
Favor built-ins (standard library) over framework/library equivalents
• Array: forEach(), find(), map(), every()
• Object: defineProperty(), assign(), keys()
• Function: bind()
• String: startsWith(), includes(), endsWith()
• Tagged Template Literals*
TimCDoherty
![Page 20: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/20.jpg)
If performance really matters, go native anyway:
TimCDoherty
![Page 21: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/21.jpg)
Go DeepTimCDoherty
![Page 22: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/22.jpg)
Learn ES 5
• Everything in ES 5 is still valid JavaScript
• ECMAScript 2015 (a.k.a. ES 6) is a superset of ES 5
• Much of the new ES 6 syntax is just terse, concise ES 5
TimCDoherty
![Page 23: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/23.jpg)
Prototypal Inheritance
• But… JavaScript has classes now, right?
• Object.create
• Differential vs. Concatenative (mixins)
Functional Programming
• First-class and higher order functions
• Pure functions
TimCDoherty
![Page 24: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/24.jpg)
Closures, IIFEs, module pattern
Type coercion
Lexical scope and hoisting
Equality and strict equality
Asynchrony and callbacks
Function call(), apply(), and bind()
What in the hell “this” is?
TimCDoherty
![Page 25: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/25.jpg)
Learn ES 6 (and beyond)New syntax
• Let/const, rest/spread, destructuring, arrow functions…
Enhanced standard library
• Object, array, string, math, number, regex…
Entirely new features
• Iterators/generators, proxies, map/set, promises, symbols…
TimCDoherty
![Page 26: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/26.jpg)
(shameless plug)
• ECMAScript 6 In Depth: Part I - Tim Doherty
• ECMAScript 6 In Depth: Part II - Tim Doherty
• ECMAScript 6 In Depth: Part III - Tim Doherty
TimCDoherty
![Page 27: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/27.jpg)
Use the Source!TimCDoherty
![Page 28: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/28.jpg)
Ember
TimCDoherty
![Page 29: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/29.jpg)
Angular
TimCDoherty
![Page 30: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/30.jpg)
Lodash
TimCDoherty
![Page 31: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/31.jpg)
• Original jQuery annotated source
• Underscore annotated source
• Backbone annotated source
• 10 Things I Learned From the jQuery Source - Paul Irish
TimCDoherty
![Page 32: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/32.jpg)
Learn what is and isn’t JavaScripthttp://i.stack.imgur.com/SeCUb.jpgTimCDoherty
![Page 33: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/33.jpg)
• Language vs. environment
• Browser, server, database, OS
• Host-provided APIs (DOM, XMLHttpRequest, etc.)
• Complimentary technologies (CSS)
• Go deep with the language first
• Then go deep with supporting technologies (DOM, CSS, etc.)
http://i.stack.imgur.com/SeCUb.jpg
TimCDoherty
![Page 34: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/34.jpg)
Learn How to Learn
TimCDoherty
![Page 35: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/35.jpg)
• Change is the only constant
• Even The Right Framework™’s days will be numbered
• You cannot know everything about everything
• Learn enough to be productive, then improve by immersion
• Develop a strategy for focused knowledge gathering
TimCDoherty
![Page 36: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/36.jpg)
Side Effects• Language-level skills
• Increased confidence
• Better problem solving ability
• Knowing what “this” is
**Occasionally, JavaScript users have reported a desire to write their own framework, or abandon frameworks altogether, although this is rare
TimCDoherty
![Page 37: Treating Framework Fatigue With JavaScriptfiles.meetup.com/8990802/TreatingFrameworkFatigue-FINAL.pdf · Treating Framework Fatigue With JavaScript Tim Doherty Software Architect](https://reader034.vdocument.in/reader034/viewer/2022042223/5ec970d8885b36221409738a/html5/thumbnails/37.jpg)
Thanks!
Tim DohertySoftware Architect
TimCDoherty timdoherty.net/in/timdoherty