Embed Size (px)
Citation preview
Leveling Up at JavaScript
Who am I?
• Developer Advocate for IBM
• MobileFirst, Cordova, Ionic, HTML5, Kittens
• Blogging at raymondcamden.com
• Tweeting at @raymondcamden
The Problem (one of many)
The Problem
The Problem
The Problem
The Problem
The Problem
My Goal
My Goal
1. Organization
PRO TIP 1: STOP PUTTING ALL YOUR JS ON TOP OF THE PAGE!
<html> <head> <script> function omgPonies() { //250 lines of PONIES! } </script> </head>
<body> <!-- lots of layout, probably frames and tables --> </body> </html>
<html> <head> <script src="ponies.js"></script> </head>
<body> <!-- lots of layout, probably frames and tables --> </body> </html>
QUESTION: HOW DO YOU KNOW WHEN YOUR
JS FILE IS TOO BIG?
QUESTION: HOW DO YOU KNOW WHEN YOUR
JS FILE IS TOO BIG?Answer: It already is.
Typical Web App
Typical Web App• Code to do DOM crap
Typical Web App• Code to do DOM crap
• Code to hit the server and get crap
Typical Web App• Code to do DOM crap
• Code to hit the server and get crap
• Code to call other libraries
Typical Web App• Code to do DOM crap
• Code to hit the server and get crap
• Code to call other libraries
• Whole section to put those giant dialogs on front of the screen asking you to "like" the site even though all it does is cause EVERYONE PURE RAGE!
Solution:
Frameworks!
You have options...
You have options...
Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, YUI, Agility.js, Knockback.js, CanJS, Maria, Polymer, React, cujoJS, Montage, Sammy.js, Stapes, Epitome, soma.js, DUEL, Kendo UI, BUT WAIT, THERE'S MORE,
PureMVC, Olives, PlastronJS, Dijon, rAppid.js, DefJS+ExtJS, Aria Templates, Enyo+Backbone.js, AngularJS (optimized), SAPIUI5, OMG REALLY?!?!,
Exoskeleton, Atma.js, Ractive.js, ComponentJS, Vue.js, React+Backbone.js
Design Patterns
var c = new Car(); c.startEngine(); c.drive(); c.soNotRealistic();
The Module Pattern
• Creates a "package" for your code
• Explicitly allows for public (exposed) and private methods
• Simple way to encapsulate a set of logic behind a variable
var someModule = (function() { //stuff here }());
var someModule = (function() { //stuff here }());
var someModule = (function() { //stuff here }());
var someModule = (function() { //stuff here }());
var someModule = (function() { //stuff here }());
var someModule = (function() { var counter = 0;
return {
incrementCounter: function () { return counter++; },
resetCounter: function () { console.log( "counter value prior to reset: " + counter ); counter = 0; } }; }());
Demo
2. Linting
This is linting!
This is linting!
This is linting!
This is linting!
This is linting!
Use ===!!! Don't pollute the global scope!
Use semicolons!
You know you rename a function and tell yourself you're going to fix it later?
You know you define a function to accept two arguments and end up only ever using one?
You know how you write really stupid code
sometimes?
Linting helps with that!
Option One
Option One
• JSLint
Option One
• JSLint
• "Warning: JSLint will hurt your feelings."
Option One
• JSLint
• "Warning: JSLint will hurt your feelings."
• Available at jslint.com, and in many editors
Option Two
Option Two• JSHint
Option Two• JSHint
• "It is quickly transforming from a tool that helps developers to prevent bugs to a tool that makes sure you write your code like Douglas Crockford."
Option Two• JSHint
• "It is quickly transforming from a tool that helps developers to prevent bugs to a tool that makes sure you write your code like Douglas Crockford."
• "JSLint can suck it" - Brendan Eich
Option Two• JSHint
• "It is quickly transforming from a tool that helps developers to prevent bugs to a tool that makes sure you write your code like Douglas Crockford."
• "JSLint can suck it" - Brendan Eich
• Available at jshint.com, and in many editors
Demo
3. Testing
A quick diversion (no kittens, honest)
So yeah - testing good
Making Testing Easier
Making Testing Easier
• Multiple options (I like Jasmine)
Making Testing Easier
• Multiple options (I like Jasmine)
• Good editors support this out of the box
Making Testing Easier
• Multiple options (I like Jasmine)
• Good editors support this out of the box
• Automation tools support it
Demo
4. Performance and Debugging
Dev Tools
Dev Tools
• Browser's default behavior is to do nothing
Dev Tools
• Browser's default behavior is to do nothing
• Run with your tools open, pretty much 100% of the time
Dev Tools
• Browser's default behavior is to do nothing
• Run with your tools open, pretty much 100% of the time
• USE MORE THAN ONE!
5. Learning More
Where to focus
Where to focus
• Sites that can teach you X
Where to focus
• Sites that can teach you X
• Knowing Y exists
Where to focus
• Sites that can teach you X
• Knowing Y exists
• Figuring out when you don't need to give a crap about Z
Learning
Learning
• Mozilla Developer Network (google: mdn x)
Learning
• Mozilla Developer Network (google: mdn x)
• CodeSchool
Learning
• Mozilla Developer Network (google: mdn x)
• CodeSchool
• Kahn Academy
Discovering
Discovering
• Cooper Press newsletters (cooperpress.com)
Discovering
• Cooper Press newsletters (cooperpress.com)
• JavaScript Weekly, HTML5 Weekly, Mobile Weekly (no Kitten Weekly - shame)
