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