Leveling up in localization! - Susan Alma & Dario Quondamstefano
Leveling Up at JavaScript
-
Upload
raymond-camden -
Category
Internet
-
view
1.429 -
download
2
Transcript of Leveling Up at JavaScript
![Page 1: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/1.jpg)
Leveling Up at JavaScript
![Page 2: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/2.jpg)
Who am I?
• Developer Advocate for IBM
• MobileFirst, Cordova, Ionic, HTML5, Kittens
• Blogging at raymondcamden.com
• Tweeting at @raymondcamden
![Page 3: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/3.jpg)
The Problem (one of many)
![Page 4: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/4.jpg)
The Problem
![Page 5: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/5.jpg)
The Problem
![Page 6: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/6.jpg)
The Problem
![Page 7: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/7.jpg)
The Problem
![Page 8: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/8.jpg)
The Problem
![Page 9: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/9.jpg)
My Goal
![Page 10: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/10.jpg)
My Goal
![Page 11: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/11.jpg)
![Page 12: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/12.jpg)
1. Organization
![Page 13: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/13.jpg)
PRO TIP 1: STOP PUTTING ALL YOUR JS ON TOP OF THE PAGE!
![Page 14: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/14.jpg)
<html> <head> <script> function omgPonies() { //250 lines of PONIES! } </script> </head>
<body> <!-- lots of layout, probably frames and tables --> </body> </html>
![Page 15: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/15.jpg)
<html> <head> <script src="ponies.js"></script> </head>
<body> <!-- lots of layout, probably frames and tables --> </body> </html>
![Page 16: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/16.jpg)
QUESTION: HOW DO YOU KNOW WHEN YOUR
JS FILE IS TOO BIG?
![Page 17: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/17.jpg)
QUESTION: HOW DO YOU KNOW WHEN YOUR
JS FILE IS TOO BIG?Answer: It already is.
![Page 18: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/18.jpg)
Typical Web App
![Page 19: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/19.jpg)
Typical Web App• Code to do DOM crap
![Page 20: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/20.jpg)
Typical Web App• Code to do DOM crap
• Code to hit the server and get crap
![Page 21: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/21.jpg)
Typical Web App• Code to do DOM crap
• Code to hit the server and get crap
• Code to call other libraries
![Page 22: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/22.jpg)
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!
![Page 23: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/23.jpg)
Solution:
![Page 24: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/24.jpg)
Frameworks!
![Page 25: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/25.jpg)
You have options...
![Page 26: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/26.jpg)
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
![Page 27: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/27.jpg)
Design Patterns
![Page 28: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/28.jpg)
![Page 29: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/29.jpg)
var c = new Car(); c.startEngine(); c.drive(); c.soNotRealistic();
![Page 30: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/30.jpg)
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
![Page 31: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/31.jpg)
var someModule = (function() { //stuff here }());
![Page 32: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/32.jpg)
var someModule = (function() { //stuff here }());
![Page 33: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/33.jpg)
var someModule = (function() { //stuff here }());
![Page 34: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/34.jpg)
var someModule = (function() { //stuff here }());
![Page 35: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/35.jpg)
var someModule = (function() { //stuff here }());
![Page 36: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/36.jpg)
var someModule = (function() { var counter = 0;
return {
incrementCounter: function () { return counter++; },
resetCounter: function () { console.log( "counter value prior to reset: " + counter ); counter = 0; } }; }());
![Page 37: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/37.jpg)
Demo
![Page 38: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/38.jpg)
2. Linting
![Page 39: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/39.jpg)
This is linting!
![Page 40: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/40.jpg)
This is linting!
![Page 41: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/41.jpg)
This is linting!
![Page 42: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/42.jpg)
This is linting!
![Page 43: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/43.jpg)
This is linting!
Use ===!!! Don't pollute the global scope!
Use semicolons!
![Page 44: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/44.jpg)
You know you rename a function and tell yourself you're going to fix it later?
![Page 45: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/45.jpg)
You know you define a function to accept two arguments and end up only ever using one?
![Page 46: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/46.jpg)
You know how you write really stupid code
sometimes?
![Page 47: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/47.jpg)
Linting helps with that!
![Page 48: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/48.jpg)
Option One
![Page 49: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/49.jpg)
Option One
• JSLint
![Page 50: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/50.jpg)
Option One
• JSLint
• "Warning: JSLint will hurt your feelings."
![Page 51: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/51.jpg)
Option One
• JSLint
• "Warning: JSLint will hurt your feelings."
• Available at jslint.com, and in many editors
![Page 52: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/52.jpg)
Option Two
![Page 53: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/53.jpg)
Option Two• JSHint
![Page 54: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/54.jpg)
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."
![Page 55: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/55.jpg)
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
![Page 56: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/56.jpg)
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
![Page 57: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/57.jpg)
Demo
![Page 58: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/58.jpg)
3. Testing
![Page 59: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/59.jpg)
A quick diversion (no kittens, honest)
![Page 60: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/60.jpg)
![Page 61: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/61.jpg)
![Page 62: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/62.jpg)
![Page 63: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/63.jpg)
![Page 64: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/64.jpg)
![Page 65: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/65.jpg)
![Page 66: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/66.jpg)
So yeah - testing good
![Page 67: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/67.jpg)
Making Testing Easier
![Page 68: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/68.jpg)
Making Testing Easier
• Multiple options (I like Jasmine)
![Page 69: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/69.jpg)
Making Testing Easier
• Multiple options (I like Jasmine)
• Good editors support this out of the box
![Page 70: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/70.jpg)
Making Testing Easier
• Multiple options (I like Jasmine)
• Good editors support this out of the box
• Automation tools support it
![Page 71: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/71.jpg)
Demo
![Page 72: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/72.jpg)
4. Performance and Debugging
![Page 73: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/73.jpg)
Dev Tools
![Page 74: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/74.jpg)
Dev Tools
• Browser's default behavior is to do nothing
![Page 75: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/75.jpg)
Dev Tools
• Browser's default behavior is to do nothing
• Run with your tools open, pretty much 100% of the time
![Page 76: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/76.jpg)
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!
![Page 77: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/77.jpg)
5. Learning More
![Page 78: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/78.jpg)
![Page 79: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/79.jpg)
![Page 80: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/80.jpg)
Where to focus
![Page 81: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/81.jpg)
Where to focus
• Sites that can teach you X
![Page 82: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/82.jpg)
Where to focus
• Sites that can teach you X
• Knowing Y exists
![Page 83: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/83.jpg)
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
![Page 84: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/84.jpg)
Learning
![Page 85: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/85.jpg)
Learning
• Mozilla Developer Network (google: mdn x)
![Page 86: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/86.jpg)
Learning
• Mozilla Developer Network (google: mdn x)
• CodeSchool
![Page 87: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/87.jpg)
Learning
• Mozilla Developer Network (google: mdn x)
• CodeSchool
• Kahn Academy
![Page 88: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/88.jpg)
Discovering
![Page 89: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/89.jpg)
Discovering
• Cooper Press newsletters (cooperpress.com)
![Page 90: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/90.jpg)
Discovering
• Cooper Press newsletters (cooperpress.com)
• JavaScript Weekly, HTML5 Weekly, Mobile Weekly (no Kitten Weekly - shame)
![Page 91: Leveling Up at JavaScript](https://reader037.fdocuments.net/reader037/viewer/2022103117/55b6db13bb61ebe4588b4586/html5/thumbnails/91.jpg)