Better Structure JavaScript

This is a talk that I gave at Munich about structuring JavaScript code using RequireJS with Backbonejs.

Transcript

1. Better Structure JavaScript Zafar Saleem
2. Agenda § Traditional JavaScript File Injection § Requirejs (Asynchronous Module Definition) § Structure JS using frameworks
3. Traditional JS file injection <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="vendors/jquery.js"></script> <script src="vendors/mutators.js"></script> <script src="vendors/memento.js"></script> <script src="vendors/workflow.js"></script> <script src="vendors/validation.js"></script> <script src="vendors/nested.js"></script> <script src="vendors/relational.js"></script> <script src="scripts/InvoiceItemModel.js"></script> <script src="scripts/BuyerModel.js"></script> <script src="scripts/main.js"></script> </body> </html>
5. Requirejs § Asynchronous Module Definition (AMD) § 3 main methods §  define §  require §  config
6. Requirejs JS file injection <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script data-main=”scripts/main.js" src=”libs/require.js"></script> </body> </html>
7. config(); require.config({ paths: { 'jquery' : 'libs/jquery/dist/jquery', ’mutators' : 'libs/mutators/mutators', ’validation' : 'libs/validation/validation', 'text' : 'plugins/text' } });
8. config(); require.config({ paths: { 'jquery' : 'libs/jquery/dist/jquery', ’mutators' : 'libs/mutators/mutators', ’validation' : 'libs/validation/validation', 'text' : 'plugins/text' } });
9. require() require(['app'], function (App) { new App(); });
10. require() require(['app'], function (App) { new App(); });
11. require() require(['app'], function (App) { new App(); });
12. require() require(['app'], function (App) { new App(); });
13. define() define(‘moduleName’, [‘dep1’, ‘dep2’], function (Dep1, Dep2) { });
14. define() define(‘moduleName’, [‘dep1’, ‘dep2’], function (Dep1, Dep2) { });
15. define() define(‘moduleName’, [‘dep1’, ‘dep2’], function (Dep1, Dep2) { });
16. define() define(‘moduleName’, [‘dep1’, ‘dep2’], function (Dep1, Dep2) { });
17. Alternative solutions § Commonjs § Browserify
18. Structure JavaScript using Frameworks
21. § Models § Views § Collections § Routers
22. Models var BuyerModel = Backbone.Model.extend({ });
23. Models var BuyerModel = Backbone.Model.extend({ });
24. Models var BuyerModel = Backbone.Model.extend({ });
25. Requirejs + Models define( [‘backbone’], function (Backbone) { var BuyerModel = Backbone.Model.extend({ }); return BuyerModel; });
26. Models attributes define( [‘backbone’], function (Backbone) { var BuyerModel = Backbone.Model.extend({ defaults: { ‘firstName’: ‘John’, ‘LastName’: ‘Woo’ } }); return BuyerModel; });
27. Models attributes + Methods define( [‘backbone’], function (Backbone) { var BuyerModel = Backbone.Model.extend({ validate: function (attr) { } }); return BuyerModel; });
28. Models attributes + Methods define( [‘backbone’], function (Backbone) { var BuyerModel = Backbone.Model.extend({ relations: [{ type: Backbone.HasOne, key: 'user', relatedModel: UserModel, reverseRelation: { type: Backbone.HasOne, key: 'buyer' } }] }); return BuyerModel; });
29. Collections var BuyerCollection = Backbone.Collection.extend({ });
30. Requirejs + Collections define( [‘backbone’], function (Backbone) { var BuyerCollections = Backbone.Collection.extend({ }); return BuyerCollection; });
31. Collections + Model define( [‘backbone’, ‘BuyerModel’], function (Backbone, BuyerModel) { var BuyerCollections = Backbone.Collection.extend({ model: BuyerModel }); return BuyerCollection; });
32. Views var BuyerView = Backbone.View.extend({ });
33. Requirejs + Views define( [‘backbone’], function (Backbone) { var BuyerView = Backbone.View.extend({ }); return BuyerView; });
34. Views Usage define( [‘backbone’], function (Backbone) { var BuyerView = Backbone.View.extend({ }); return BuyerView; }); new BuyerModel({ collection: BuyerCollection });
35. Views Attributes + Methods define( [‘backbone’], function (Backbone) { var BuyerView = Backbone.View.extend({ el: ‘ul’, }); return BuyerView; });
36. Views Attributes + Methods define( [‘backbone’], function (Backbone) { var BuyerView = Backbone.View.extend({ events: { ‘click .button’: ‘callbackMethod’ }, callbackMethod: function () { alert(‘I am called’); } }); return BuyerView; });
37. Views Attributes + Methods define([‘backbone’], function (Backbone) { var BuyerView = Backbone.View.extend({ initialize: function () { alert(‘I am constructor method’); } }); return BuyerView; });
38. Views Attributes + Methods define([‘backbone’], function (Backbone) { var BuyerView = Backbone.View.extend({ render: function () { this.$el.append(‘<li>I am rendered</li>’); } }); return BuyerView; });
39. Summary § Traditional way of injecting JavaScript Files § Requirejs (Asynchronous Module Definition) § define(), require(), config() § Structure JS using frameworks using Backbone § Views, Collections and Models
40. The end