Building Your own Widget with ArcGIS API for JavaScript Matt Driscoll – @driskull JC Franco – @arfncode Agenda Widgets Best practices Building our widget 3.x 4.x Testing Widgets What? Encapsulated Cohesive Single-purpose pieces of functionality Why? Reusable Interchangeable How? Different frameworks are available Dojo Toolkit Foundation of ArcGIS JavaScript API AMD support Class-based inheritance Internationalization Asynchronous Module Definition (AMD) Asynchronous loading Web-based solution Lazy loading Fewer globals Dependency handling Asynchronous Module Definition (AMD) define // moduleA.js define(["moduleB"], function (moduleB) { // module API return { _data: 100, calculate: function () { moduleB.calculate(this._data); } }; }); require // main.js require(["moduleA"], function (moduleA) { moduleA.calculate(); }); dijit/_WidgetBase what you get Lifecycle constructor postMixInProperties buildRendering postCreate startup destroy Events Getters/Setters Property watching Simple widget example // MyWidget.js define([ "dijit/_WidgetBase", // ... ], function( _WidgetBase, // ... ) { return _WidgetBase.createSubclass({ ✧ ✧ // widget magic here! °˖ ◝(⁰ ⁰)◜ ˖° ▿ }); }); Simple widget Code Organization Keep code modular and organized Splitting it up (HTML) Extract HTML to separate file Mix in dijit/_TemplatedMixin Renders HTML based on a template string Create DOM node attachments