Treating Framework Fatigue With JavaScript
Tim DohertySoftware Architect
TimCDoherty timdoherty.net/in/timdoherty
TimCDoherty
???
TimCDoherty
Hey, this one looks cool!TimCDoherty
You May Suffer From Framework Fatigue
TimCDoherty
Symptoms
TimCDoherty
ConfusionTimCDoherty
• 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
AmbivalenceTimCDoherty
https://twitter.com/jesterxl/status/598885321808424960TimCDoherty
• 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
SkepticismTimCDoherty
• “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
Reduced Capacity for Hype and Marketing Lingo
TimCDoherty
• “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
TimCDoherty
Treatment
TimCDoherty
Go NativeTimCDoherty
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
If performance really matters, go native anyway:
TimCDoherty
Go DeepTimCDoherty
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
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
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
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
(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
Use the Source!TimCDoherty
Ember
TimCDoherty
Angular
TimCDoherty
Lodash
TimCDoherty
• Original jQuery annotated source
• Underscore annotated source
• Backbone annotated source
• 10 Things I Learned From the jQuery Source - Paul Irish
TimCDoherty
Learn what is and isn’t JavaScripthttp://i.stack.imgur.com/SeCUb.jpgTimCDoherty
• 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
Learn How to Learn
TimCDoherty
• 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
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
Thanks!
Tim DohertySoftware Architect
TimCDoherty timdoherty.net/in/timdoherty