SlideShare a Scribd company logo
1 of 35
The War is Over, and JavaScript
has won: Living Under the JS
Regime
Matt Honeycutt
@matthoneycutt
http://trycatchfail.com
About Me
Icon from icons8.com
Part 1: Defeat and Sadness
It started in the browser…
Browser Server
Mobile Embedded
It started in the browser…
Browser Server
Mobile Embedded
Then it came for the server….
Browser Server
Mobile Embedded
And it spread…
Browser Server
Mobile Embedded
And spread…
Browser Server
Mobile Embedded
JAVASCRIPT
Part 2: Reconstruction
The World Went Crazy
To My Old Team:
I’m so very, very sorry for what
2008-ish Matt did with jQuery. He really didn’t know
any better.
- Modern Matt
How awesome I thought my JavaScript
was…
What I actually built
Bad Memories
More Bad Memories
(function($, undefined) {
})(jQuery);
More Bad Memories
undefined = !undefined;
More Bad Memories
window.ourCompany = window.ourCompany || {};
window.ourCompany.utils = window.ourCompany.utils || {};
window.ourCompany.utils.doStuff = function() {
//...
}
The Tragedy
“…JavaScript is a
tragically important
language…”
Part 3: A Better Future, Now
This Isn’t the JavaScript that Killed Your
Father…
Then vs. Now
 Prototypical inheritance
 Lots of jQuery
 Redefined undefined
 More jQuery
 var that = this;
 jQuery
 Hoisting
 IIFEs
 Globals
 jQuery
 Classes
 Arrow functions
 Generators
 Modules
 Better libraries and frameworks
 And lots more!
 (don’t worry, we still have the bad
parts!)
The World as it Exists Today
import {Todo} from './todo';
export class Index {
constructor() {
this.heading = 'Todos';
this.todos = [];
this.todoDescription = '';
}
addTodo() {
if (this.todoDescription) {
this.todos.push(new Todo(this.todoDescription));
this.lastAction = `Added new item: ${this.todoDescription}`;
this.todoDescription = '';
}
}
}
There’s Also TypeScript
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'page-user',
templateUrl: 'signup.html'
})
export class SignupPage {
signup: {username?: string, password?: string} = {};
submitted = false;
constructor(public navCtrl: NavController, public userData: UserData) {}
onSignup(form: NgForm) {
this.submitted = true;
if (form.valid) {
this.userData.signup(this.signup.username);
this.navCtrl.push(TabsPage);
}
}
}
Modern JS is Capable of Great Things!
JavaScript is better!
import {Todo} from './todo';
export class Index {
constructor() {
this.heading = 'Todos';
this.todos = [];
this.todoDescription = '';
}
addTodo() {
if (this.todoDescription) {
this.todos.push(new Todo(this.todoDescription));
this.lastAction = `Added new item: ${this.todoDescription}`;
this.todoDescription = '';
}
}
}
But it’s not perfect
But we can cope!
Demos!
Black-Belt Coping Techniques
Black-Belt Coping Techniques
Your JavaScript Bug-Out Bag
 Visual Studio Code
 NodeJS
 NPM
 Aurelia or <insert other popular framework>
 MODERN JavaScript (or TypeScript)
 Babel
 Lo-dash
Credits
 Wat presentation:
https://www.destroyallsoftware.com/talks/wat
 Wtf.js:
https://gist.github.com/MichalZalecki/c964192f8
30360ce6361
 Martin Thoma: https://martin-
thoma.com/javascript-wtf/
Pluralsight Courses
https://goo.gl/QXoOhO
Want More?
Twitter:
@matthoneycutt
Blog:
http://trycatchfail.com
Consulting:
mbhoneycutt@gmail.com

More Related Content

What's hot

ARTDM 170 Week 3: Rollovers
ARTDM 170 Week 3: RolloversARTDM 170 Week 3: Rollovers
ARTDM 170 Week 3: Rollovers
Gilbert Guerrero
 

What's hot (10)

Event In JavaScript
Event In JavaScriptEvent In JavaScript
Event In JavaScript
 
えっ、なにそれこわい
えっ、なにそれこわいえっ、なにそれこわい
えっ、なにそれこわい
 
Javascript dom event
Javascript dom eventJavascript dom event
Javascript dom event
 
Aprimorando sua Aplicação com Ext JS 4 - BrazilJS
Aprimorando sua Aplicação com Ext JS 4 - BrazilJSAprimorando sua Aplicação com Ext JS 4 - BrazilJS
Aprimorando sua Aplicação com Ext JS 4 - BrazilJS
 
MVVM e Caliburn Micro for Windows Phone applications
MVVM e Caliburn Micro for Windows Phone applicationsMVVM e Caliburn Micro for Windows Phone applications
MVVM e Caliburn Micro for Windows Phone applications
 
Functional Web Development using Elm
Functional Web Development using ElmFunctional Web Development using Elm
Functional Web Development using Elm
 
Connecting Flash and Javascript using ExternalInterface
Connecting Flash and Javascript using ExternalInterfaceConnecting Flash and Javascript using ExternalInterface
Connecting Flash and Javascript using ExternalInterface
 
What the FUF?
What the FUF?What the FUF?
What the FUF?
 
Javascript session june 2013 (iii) jquery json
Javascript session june 2013 (iii) jquery   jsonJavascript session june 2013 (iii) jquery   json
Javascript session june 2013 (iii) jquery json
 
ARTDM 170 Week 3: Rollovers
ARTDM 170 Week 3: RolloversARTDM 170 Week 3: Rollovers
ARTDM 170 Week 3: Rollovers
 

Similar to The War is Over, and JavaScript has won: Living Under the JS Regime

Mobile Software Engineering Crash Course - C06 WindowsPhone
Mobile Software Engineering Crash Course - C06 WindowsPhoneMobile Software Engineering Crash Course - C06 WindowsPhone
Mobile Software Engineering Crash Course - C06 WindowsPhone
Mohammad Shaker
 
Hi,I have updated the code as per your requirement. Highlighted th.pdf
Hi,I have updated the code as per your requirement. Highlighted th.pdfHi,I have updated the code as per your requirement. Highlighted th.pdf
Hi,I have updated the code as per your requirement. Highlighted th.pdf
annaindustries
 
Asynchronous Programming with JavaScript
Asynchronous Programming with JavaScriptAsynchronous Programming with JavaScript
Asynchronous Programming with JavaScript
WebF
 
20150516 modern web_conf_tw
20150516 modern web_conf_tw20150516 modern web_conf_tw
20150516 modern web_conf_tw
Tse-Ching Ho
 

Similar to The War is Over, and JavaScript has won: Living Under the JS Regime (20)

How React Native Appium and me made each other shine
How React Native Appium and me made each other shineHow React Native Appium and me made each other shine
How React Native Appium and me made each other shine
 
Reactive Type-safe WebComponents
Reactive Type-safe WebComponentsReactive Type-safe WebComponents
Reactive Type-safe WebComponents
 
[FEConf Korea 2017]Angular 컴포넌트 대화법
[FEConf Korea 2017]Angular 컴포넌트 대화법[FEConf Korea 2017]Angular 컴포넌트 대화법
[FEConf Korea 2017]Angular 컴포넌트 대화법
 
Angular2: Quick overview with 2do app example
Angular2: Quick overview with 2do app exampleAngular2: Quick overview with 2do app example
Angular2: Quick overview with 2do app example
 
How React Native, Appium and me made each other shine @ContinuousDeliveryAmst...
How React Native, Appium and me made each other shine @ContinuousDeliveryAmst...How React Native, Appium and me made each other shine @ContinuousDeliveryAmst...
How React Native, Appium and me made each other shine @ContinuousDeliveryAmst...
 
Web versus Native: round 1!
Web versus Native: round 1!Web versus Native: round 1!
Web versus Native: round 1!
 
Building Large jQuery Applications
Building Large jQuery ApplicationsBuilding Large jQuery Applications
Building Large jQuery Applications
 
jQuery Fundamentals
jQuery FundamentalsjQuery Fundamentals
jQuery Fundamentals
 
Frontin like-a-backer
Frontin like-a-backerFrontin like-a-backer
Frontin like-a-backer
 
Unit3.pptx
Unit3.pptxUnit3.pptx
Unit3.pptx
 
Mobile Software Engineering Crash Course - C06 WindowsPhone
Mobile Software Engineering Crash Course - C06 WindowsPhoneMobile Software Engineering Crash Course - C06 WindowsPhone
Mobile Software Engineering Crash Course - C06 WindowsPhone
 
Hi,I have updated the code as per your requirement. Highlighted th.pdf
Hi,I have updated the code as per your requirement. Highlighted th.pdfHi,I have updated the code as per your requirement. Highlighted th.pdf
Hi,I have updated the code as per your requirement. Highlighted th.pdf
 
Migrating from Struts 1 to Struts 2
Migrating from Struts 1 to Struts 2Migrating from Struts 1 to Struts 2
Migrating from Struts 1 to Struts 2
 
Vaadin 7 CN
Vaadin 7 CNVaadin 7 CN
Vaadin 7 CN
 
Advanced Silverlight
Advanced SilverlightAdvanced Silverlight
Advanced Silverlight
 
Creating a New iSites Tool
Creating a New iSites ToolCreating a New iSites Tool
Creating a New iSites Tool
 
jQuery Ecosystem
jQuery EcosystemjQuery Ecosystem
jQuery Ecosystem
 
Asynchronous Programming with JavaScript
Asynchronous Programming with JavaScriptAsynchronous Programming with JavaScript
Asynchronous Programming with JavaScript
 
20150516 modern web_conf_tw
20150516 modern web_conf_tw20150516 modern web_conf_tw
20150516 modern web_conf_tw
 
Puppeteer - A web scraping & UI Testing Tool
Puppeteer - A web scraping & UI Testing ToolPuppeteer - A web scraping & UI Testing Tool
Puppeteer - A web scraping & UI Testing Tool
 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 

The War is Over, and JavaScript has won: Living Under the JS Regime