1 / 59

Write Better Javascript

Write Better Javascript. with RequireJS. What is RequireJS?. What is RequireJS?. from requirejs.org,

vala
Download Presentation

Write Better Javascript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Write Better Javascript with RequireJS

  2. What is RequireJS?

  3. What is RequireJS? from requirejs.org, "RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code."

  4. What is RequireJS? • Async Script Loader • 12 k • Very actively developed • Well documented • new BSD / MIT

  5. Why use a tool like RequireJS?

  6. Why use a tool like RequireJS? Because Javascript Sucks. Also, user side scripting makes things worse.

  7. JS sucks ├── parks│   ├── admin.py│   ├── fixtures│   │   ├── initial_featurecategories.json│   │   └── train_examples.json│   ├── forms.py│   ├── importers│   │   └── recdata.py│   ├── management│   │   ├── commands│   │   │   ├── exportoregonparks.py│   │   │   ├── importparks.py│   │   │   ├── ... ... .├── local_settings.py├── manage.py├── datacleaning│   ├── admin.py│   ├── forms.py│   ├── migrations│   │   └── 0001_initial.py│   ├── models.py│   ├── tests.py│   ├── urls.py│   └── views.py├── journals│   ├── admin.py│   ├── fixtures│   │   └── 20101124_5.03.json│   ├── forms.py│   ├── migrations│   │   ├── 0001_initial.py│   │   ├── 0002_auto__images__add_entry.py│   │   └── 0003_loading_test_journal_entries.py│   ├── models.py│   ├── tests.py│   ├── urls.py│   └── views.py├── lib│   ├── context_processors.py│   ├── string_processors.py│   ├── template.py│   ├── urlmiddleware.py│   ├── user.py│   └── widgets.py

  8. │   │           └── default.js│   ├── skins│   │   └── kama│   │       ├── dialog.css│   │       ├── editor.css│   │       ├── icons.png│   │       ├── icons_rtl.png│   │       ├── images│   │       │   ├── dialog_sides.gif│   │       │   ├── dialog_sides.png│   │       │   ├── dialog_sides_rtl.png│   │       │   ├── mini.gif│   │       │   ├── noimage.png│   │       │   ├── sprites_ie6.png│   │       │   ├── sprites.png│   │       │   └── toolbar_start.gif│   │       ├── skin.js│   │       └── templates.css│   └── SQRLY_TEAM_PLEASE_README__LICENSE├── elevationservice_eg_google.js├── jquery.form.js├── jquery.history.js├── jqueryplugins│   ├── jquery.address-1.3.js│   └── jquery.simplemodal-1.3.min.js├── markers.js├── pages│   ├── add-park.js│   ├── datacleaning.js│   └── park-detail.js├── park-ratings.js├── polylinearray_eg_google.js├── star-rating.js└── star-rating-metadata.js │   │   ├── hi.js│   │   ├── hr.js│   │   ├── hu.js│   │   ├── is.js│   │   ├── it.js│   │   ├── ja.js│   │   ├── ka.js│   │   ├── km.js│   │   ├── ko.js│   │   ├── _languages.js│   │   ├── lt.js│   │   ├── lv.js│   │   ├── mn.js│   │   ├── ms.js│   │   ├── nb.js│   │   ├── nl.js│   │   ├── no.js│   │   ├── pl.js│   │   ├── pt-br.js│   │   ├── pt.js│   │   ├── ro.js│   │   ├── ru.js│   │   ├── sk.js│   │   ├── sl.js│   │   ├── sr.js│   │   ├── sr-latn.js│   │   ├── sv.js│   │   ├── th.js│   │   ├── _trans.txt│   │   ├── tr.js│   │   ├── uk.js│   │   ├── vi.js│   │   ├── zh-cn.js│   │   └── zh.js│   ├── plugins│   │   └── styles│   │       └── styles JS sucks .├── ckeditor│   ├── ckeditor.js│   ├── contents.css│   ├── lang│   │   ├── af.js│   │   ├── ar.js│   │   ├── bg.js│   │   ├── bn.js│   │   ├── bs.js│   │   ├── ca.js│   │   ├── cs.js│   │   ├── cy.js│   │   ├── da.js│   │   ├── de.js│   │   ├── el.js│   │   ├── en-au.js│   │   ├── en-ca.js│   │   ├── en-gb.js│   │   ├── en.js│   │   ├── eo.js│   │   ├── es.js│   │   ├── et.js│   │   ├── eu.js│   │   ├── fa.js│   │   ├── fi.js│   │   ├── fo.js│   │   ├── fr-ca.js│   │   ├── fr.js│   │   ├── gl.js│   │   ├── gu.js│   │   ├── he.js

  9. JS sucks • code is too long • just a little code from somewhere else • copy and paste • goto: 1

  10. JS sucks <head>   <script src="foo.js" type="text/javascript"></script>   <script src="bar.js" type="text/javascript"></script>   <script src="baz.js" type="text/javascript"></script>   <script src="biff.js" type="text/javascript"></script>   <script src="bop.js" type="text/javascript"></script>   <script src="foo.js" type="text/javascript"></script>   <script src="bar.js" type="text/javascript"></script>   <script src="baz.js" type="text/javascript"></script>   <script src="biff.js" type="text/javascript"></script>   <script src="bop.js" type="text/javascript"></script>    <script src="foo.js" type="text/javascript"></script>   <script src="bar.js" type="text/javascript"></script>   <script src="baz.js" type="text/javascript"></script>   <script src="biff.js" type="text/javascript"></script>   <script src="bop.js" type="text/javascript"></script> ... </head>

  11. RequireJS makes JS suck less • Help you make your code more modular • manages script loading for you • build and compress your code (oh, and other stuff too...)

  12. Making code more modular

  13. So what's the code look like?

  14. Loading from the page <script data-main="pages/profile.js"            src="scripts/require.js"></script> <script src="scripts/require.js"></script> require(["pages/profile"]);

  15. Loading from the page require(["pages/profile"], function(Profile) {     ...do stuff...     require.ready() {         ...do more stuff...         Profile.init(INSERT_SOMETHING_HERE);     });}); 

  16. Defining a Module define(["foo", "baz", "x"], function(Foo, Baz) {     ...do stuff...     return {         init: function(data) {            container = data;        },         do_something: some_internal_method    }}); 

  17. Loading - production vs dev

  18. Loading - production vs dev

  19. Loading - production vs dev

  20. Let's look at an example

  21. require("map", function(Map) {     ... map file is loaded ... });

  22. require("map", function(Map) {     ... map file is loaded ... });

  23. require("map", function(Map) {     ... map file is loaded ... }); define(["gm", "foo"], function(GM, Foo) {     ... set up js ...     return {}; });

  24. require("map", function(Map) {     ... map file is loaded ... }); define(["gm", "foo"], function(GM, Foo) {     ... set up js ...     return {}; });

  25. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         ... page is ready ...     }); }); define(["gm", "foo"], function(GM, Foo) {     ... set up js ...     return {}; });

  26. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         Map.init();     }); }); define(["gm", "foo"], function(GM, Foo) {     ... set up js ...     return {}; });

  27. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         Map.init();     }); }); define(["gm", "foo"], function(GM, Foo) {     ... set up js ...      return {}; });

  28. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         Map.init();     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {}; });

  29. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         Map.init();     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init     }; });

  30. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         Map.init();     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init     }; });

  31. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         Map.init("div_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init     }; });

  32. That's it.

  33. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         Map.init("div_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init     }; });

  34. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         Map.init("div_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init,         map: m     }; });

  35. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         Map.init("div_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init,         map: m     }; });

  36. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         Map.init("div_id");         a = Map.m;     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init,         map: m     }; });

  37. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         Map.init("div_id");         a = Map.m;         Map.init("another_div_id");         b = Map.m;     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init,         map: m     }; });

  38. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         Map.init("div_id");         a = Map.m;         Map.init("another_div_id");         b = Map.m;     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init,         map: m     }; });

  39. require("map", function(Map) {     require.ready(function() {         Map.init("div_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init,         map: m     }; });

  40. require("map", function(Map) {     require.ready(function() {         Map.init("div_id");         a = Map;     }); }); require("map", function(Map) {     require.ready(function() {         Map.init("another_div_id");         b = Map;     }); }); // a === b define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init,         map: m     }; });

  41. require({context:"abc"}, "map", function(Map) {     require.ready(function() {         Map.init("div_id");         a = Map.m;     }); }); require({context:"xyz"}, "map", function(Map) {     require.ready(function() {         Map.init("another_div_id");         b = Map.m;     }); }); // a.m !== b.m define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init,         map: m     }; });

  42. require("map", function(Map) {     require.ready(function() {         a = new Map.init("div_id");         b = new Map.init("another_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init,         map: m     }; });

  43. require("map", function(Map) {     require.ready(function() {         a = new Map.init("div_id");         b = new Map.init("another_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init,         map: m     }; });

  44. require("map", function(Map) {     require.ready(function() {         a = new Map.init("div_id");         b = new Map.init("another_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     function init(id) {         var that = {};         that.m = GM.create(id);         return that;     }     return {         init: init,         map: m     }; });

  45. require("map", function(Map) {     require.ready(function() {         a = new Map.init("div_id");         b = new Map.init("another_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     function init(id) {         var that = {};         that.m = GM.create(id);         return that;     }     return {         init: init     }; });

  46. require("map", function(Map) {     require.ready(function() {         a = new Map.init("div_id");         b = new Map.init("another_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     function init(id) {         var that = {};         that.m = GM.create(id);         return that;     }     return init; });

  47. require("map", function(Map) {     require.ready(function() {         a = new Map.init("div_id");         b = new Map.init("another_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     return function(id) {         var that = {};         that.m = GM.create(id);         return that;     } });

  48. require("map", function(Map) {     require.ready(function() {         a = new Map.init("div_id");         b = new Map.init("another_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     return function(id) {         var that = {};         that.m = GM.create(id);         return that;     } });

  49. require("map", function(Map) {     require.ready(function() {         a = new Map("div_id");         b = new Map("another_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     return function(id) {         var that = {};         that.m = GM.create(id);         return that;     } });

  50. Plugins define([ "foo!bar" ], function() { ... });

More Related