Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS...
Transcript of Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS...
![Page 1: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/1.jpg)
Building Your own Widget with ArcGIS API forJavaScript
Matt Driscoll – @driskullJC Franco – @arfncode
![Page 2: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/2.jpg)
AgendaWidgetsBest practicesBuilding our widget
3.x4.x
Testing
![Page 3: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/3.jpg)
WidgetsWhat?
EncapsulatedCohesiveSingle-purpose pieces of functionality
Why?ReusableInterchangeable
How?Different frameworks are available
![Page 4: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/4.jpg)
Dojo ToolkitFoundation of ArcGIS JavaScript APIAMD supportClass-based inheritanceInternationalization
![Page 5: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/5.jpg)
Asynchronous Module Definition (AMD)Asynchronous loadingWeb-based solutionLazy loadingFewer globalsDependency handling
![Page 6: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/6.jpg)
Asynchronous Module Definition (AMD)define
require
// moduleA.js define(["moduleB"], function (moduleB) { // module API return { _data: 100, calculate: function () { moduleB.calculate(this._data); } }; });
// main.js require(["moduleA"], function (moduleA) { moduleA.calculate(); });
![Page 7: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/7.jpg)
dijit/_WidgetBasewhat you get
LifecycleconstructorpostMixInPropertiesbuildRenderingpostCreatestartupdestroy
EventsGetters/SettersProperty watching
![Page 8: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/8.jpg)
Simple widget example// MyWidget.js define([ "dijit/_WidgetBase", // ... ], function( _WidgetBase, // ... ) { return _WidgetBase.createSubclass({ // widget magic here! °˖✧◝(⁰▿⁰)◜✧˖° }); });
Simple widget
![Page 9: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/9.jpg)
Code OrganizationKeep code modular and organized
![Page 10: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/10.jpg)
Splitting it up (HTML)Extract HTML to separate fileMix in dijit/_TemplatedMixin
Renders HTML based on a template stringCreate DOM node attachments
![Page 11: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/11.jpg)
Splitting it up (HTML) Example<!-- ./templates/MyWidget.html --> <div> <label>°˖✧◝(⁰▿⁰)◜✧˖°</label> </div>
// ./MyWidget.js define([ "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/text!./templates/MyWidget.html" ], function ( _WidgetBase, _TemplatedMixin, template ) {
return _WidgetBase.createSubclass([_TemplatedMixin], {
templateString: template,
// widget magic here! °˖✧◝(⁰▿⁰)◜✧˖°
});
![Page 12: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/12.jpg)
});
});
![Page 13: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/13.jpg)
Splitting it up (CSS)Extract widget-specific styles to separate stylesheet@import widget stylesheet wherever applicable
![Page 14: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/14.jpg)
Best practices – Accessibility (a11y)Enable your application to be used by everyoneUse semantic markupARIA rolesConsider other input devices besides the mouse
KeyboardTouchScreen reader
![Page 15: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/15.jpg)
Best practices – Internationalization (i18n)Keep text separate from application logicSupport multiple languagesHelps ease translation
define({ root: ({ "button": "Home", "title": "Default extent" }), "ar": 1, ... "zh-cn": 1 });
![Page 16: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/16.jpg)
Best practices – DOM ManipulationHere to help...
dojo/domdojo/dom-attrdojo/dom-classdojo/dom-constructdojo/dom-style (used sparingly)
![Page 17: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/17.jpg)
Best practices – StylingUse CSS classes
<style>
</style>
<div class="awesome-block"></div>
.awesome-block { background-color: chartreuse; }
and not inline styles
<div style="background-color: chartreuse"></div>
![Page 18: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/18.jpg)
Best practices – StylingMind specificity
<style>
</style>
<div id="red" class="square green blue" style="background-color: orange"></div>
#red { background-color: red; } /* ID */
.blue { background-color: blue; } /* class */ .green { background-color: green; } /* class */
.blue.green { background-color: yellow; } /* 2 classes */
ResultSpecificity calculator
![Page 19: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/19.jpg)
Best practices – StylingCSS Methodologies
Establish guidelines/rules for maintainable CSSCSS & HTML best practicesNaming conventionsOrdering/grouping of CSS rules
No silver bullet - choose what's best for your project/teamFlavors
ETC LOL...
Block-Element-Modifier (BEM)Scalable and Modular Architecture for CSS (SMACSS)Object Oriented CSS (OOCSS)SUIT CSSAtomic OOBEMITSCSS
![Page 20: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/20.jpg)
![Page 21: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/21.jpg)
Best practices – StylingBEM
Uses delimiters to separate block, element, modifiersProvides semantics (albeit verbose)Keeps specificity lowScopes styles to blocks
/* block */ .example-widget {}
/* block__element */ .example-widget__input {} .example-widget__submit {}
/* block--modifier */ .example-widget--loading {}
/* block__element--modifier */ .example-widget__submit--disabled {}
![Page 22: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/22.jpg)
Best practices – StylingPreprocessorsBenefits
VariablesMixins@import & @extend
Allow us toRestyleThemeWrite less code
FlavorsSassStylusLess
![Page 23: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/23.jpg)
WikiWidget (requirements)Use Wikipedia API to geosearch for entriesDisplay results in a listList items should center on the map and display a popupThe popup should have a link for more info (wiki page)Use Sass to compile stylesheetsApply BEM
![Page 24: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/24.jpg)
Building WikiWidget
![Page 25: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/25.jpg)
Building WikiWidget the 3x waydemo
![Page 26: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/26.jpg)
Future (4.x)Widget Architecture
View – the faceViewModel – the brain
Reusable/Testable core widget logic sans UI concernsFramework compatibilitySeparates concerns
![Page 27: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/27.jpg)
Comparison3.x 4.x
![Page 28: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/28.jpg)
ViewUses ViewModel APIs to render the UIView-specific logic resides here
![Page 29: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/29.jpg)
ViewModelCore logic of widget resides hereProvides necessary APIs for the view to do it's thingNo DOM/UI concerns (think data)
![Page 30: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/30.jpg)
Widget SDKExample: BasemapToggle
![Page 31: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/31.jpg)
ViewModel + frameworks –
– –
Angular 2 demoReact demoElm demoEmber
![Page 33: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/33.jpg)
TestingWhy?
Make sure your code worksSafety netInvestmentCode reference
![Page 34: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/34.jpg)
Testing frameworksLeverage the power of a framework!
Well-establishedDocumentedCommunitySupportAutomation
Flavors
InternQUnitJasmine
![Page 35: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/35.jpg)
InternFlexible
Support for different testing interfacesObject (basic)Test-driven development (TDD)Behavior-driven development (BDD)QUnit 1
Support for sync and async testsUnit & functional testsGreat documentationNode & browser test runnersSupported modules for testing: AMD, CommonJS, transpiledContinuous Integration
![Page 37: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/37.jpg)
Test-writing tipsStrive for readable tests
"foo() with invalid value": function(){ var subject = new Subject();
var result = subject.foo(null);
assert.isUndefined(result); }
![Page 38: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/38.jpg)
Test-writing tipsRecommended structure for tests
"test": function() { // setup
// test
// assertion }
![Page 39: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/39.jpg)
Test-writing tipsSingle logical assertion per test
"result of foo()": function() { var subject = new Subject();
var result = subject.foo({ items: 5 });
assert.instanceOf(result, Result, "is of Result type"); assert.lengthOf(result.items, 5, "number of items are generated"); assert.equal(result.title, "", "default title is ''"); }
![Page 40: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/40.jpg)
Test-writing tipsMake sure tests fail when they're supposed to
"someMethod returns 'DevSummit 2016'": function() { // ":D" does NOT fail assert.ok(util.someMethod()); }
"someMethod returns 'DevSummit 2016'": function() { assert.equal(util.someMethod(), "DevSummit 2016"); }
![Page 41: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/41.jpg)
Test-writing tipsStrive to make tests fail fast
"test async method": function() { return util.someAsyncMethod({ delay: 0 // default is 2000ms }); }
![Page 42: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/42.jpg)
Recommended sessionsArcGIS API for JavaScript: Discover 4.0 the Next GenerationThe Road Ahead: ArcGIS API for JavaScriptUsing and Customizing the ArcGIS API for JavaScript WidgetsCSS: Rules to Style ByAccessible Web Mapping Apps: ARIA, WCAG and 508 ComplianceModern Tools for the Modern Web DeveloperOptimizing Your JavaScript App for PerformanceFull Stack End to End JavaScript Testing with InternUsing TypeScript with ArcGIS JS API DevelopmentWrite Better CodeAsk a UX & UI Expert
![Page 43: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/43.jpg)
Additional ResourcesGithub -> jcfranco -> devsummit 2016 building widgetsDocumentation - 4.0 beta
![Page 44: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/44.jpg)
Rate Us!Esri Events Mobile App -
http://www.esri.com/events/eventsappiOSAndroid
Search for "Building your own widget".
![Page 45: Building Your Own Widget with ArcGIS API for JavaScript · Best practices – Styling CSS Methodologies Establish guidelines/rules for maintainable CSS CSS & HTML best practices Naming](https://reader030.fdocuments.in/reader030/viewer/2022011822/5ecd1567381ce046273d9097/html5/thumbnails/45.jpg)
Q & AQuestions?