Download to read offline
![Anatomy of a Widget
<div>
<div ng-controller="main as vm">
<h1>Hello{{vm.space()}}{{vm.name}}!</h1>
Who should I say hello to?
<input type="text" ng-model="vm.name" />
</div>
<script type="text/javascript" src="pnp-ww.js“
ww-appName="HelloApp“
ww-appType="Angular“
ww-appScripts='[{"src": “~/angular.min.js", "priority":0},
{"src": “~/script.js", "priority":1}]'>
</script>
</div>
Widget
Root
View
Widget
Wrangler
Widget Wrangler always boots to its parent element, the Widget Root.
If you boot your own widget, this HTMLElement is passed to your function.](https://image.slidesharecdn.com/developingjavascriptwidgetsshare-161119011947/75/Developing-JavaScript-Widgets-12-2048.jpg)
![Widget Wrangler Attributes
Tag Required Description
ww-appName yes Name for your app (need not be unique); Angular widgets boot to this module.
Can be a collection of strings to boot multiple Angular modules.
ww-appType no Currently "Angular" is the only supported framework. Widget Wrangler will boot
to one or more Angular 1.x modules when scripts are loaded.
ww-appBind no Your function to boot your widget when scripts are loaded. Use for any JS
framework.
ww-appCss no A JSON object* that defines the css files the widget needs in order to run
ww-appScripts yes A JSON object* that defines the javascript files the widget needs in order to run
[
{"src":"(script1.js)", "priority":0},
{"src": "script2.js", "priority":1}
//, …
]
* JSON object format
Priorities control
parallel vs. sequential
loading](https://image.slidesharecdn.com/developingjavascriptwidgetsshare-161119011947/75/Developing-JavaScript-Widgets-13-2048.jpg)
Uploaded byBob German
Developing JavaScript Widgets
The document discusses the development of JavaScript widgets, their characteristics, and best practices for creating effective widgets that are isolated, efficient, self-contained, modern, and centrally managed. It introduces 'Widget Wrangler,' an open-source tool designed to enhance widget management and integration with minimal impact on the hosting page. Additionally, it presents multiple demos and resources for implementing and testing widgets using various frameworks like AngularJS and Knockout.
More Related Content
Similar to Developing JavaScript Widgets
More from Bob German
![Number_Guessing_Game_Dsbsbssbzboc[1].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/numberguessinggamedoc1-251206215042-a076fc05-thumbnail.jpg?width=640&height=640&fit=bounds)
Developing JavaScript Widgets
- 1. Developing JavaScript Widgets Boston CodeCamp November 19, 2016 Bob German Principal Architect Email: bobg@bluemetal.com “Sometimes you have to share the page”
- 2. Bob German Bob isa Principal Architect at BlueMetal, where he leads Office 365 and SharePoint development for enterprise customers. Cloud & Services Content & Collaboration Data & Analytics Devices & Mobility Strategy & Design An Insight company #BOSCC @Bob1German
- 3. • • • • What is awidget?
- 4. Why Widgets? Widgets allow…. •Late integration with the hosting web page by end users • Independent versioning of page components • A high degree of code reuse; each widget can be tightly bound to its JS framework and loosely bound to the page
- 5. What makes agood widget? 1 ISOLATED – so they won’t interfere with other widgets or the rest of the page Can you run multiple copies of the widget on a page?
- 6. What makes agood widget? 1 ISOLATED – so they won’t interfere with other widgets or the rest of the page Can you run multiple copies of the widget on a page? 2 EFFICIENT – so they load quickly Does the page get noticeably slower as you add widgets?
- 7. What makes agood widget? 1 ISOLATED – so they won’t interfere with other widgets or the rest of the page Can you run multiple copies of the widget on a page? 2 EFFICIENT – so they load quickly Does the page get noticeably slower as you add widgets? 3 SELF-CONTAINED – so they’re easy to reuse Does the widget work without special page elements such as element ID’s, scripts, and CSS references?
- 8. What makes agood widget? 1 ISOLATED – so they won’t interfere with other widgets or the rest of the page Can you run multiple copies of the widget on a page? 2 EFFICIENT – so they load quickly Does the page get noticeably slower as you add widgets? 3 SELF-CONTAINED – so they’re easy to reuse Does the widget work without special page elements such as element ID’s, scripts, and CSS references? 4 MODERN – so they’re easier to write and maintain Is the widget written in a modern JavaScript framework such as AngularJS or Knockout?
- 9. What makes agood widget? 1 ISOLATED – so they won’t interfere with other widgets or the rest of the page Can you run multiple copies of the widget on a page? 2 EFFICIENT – so they load quickly Does the page get noticeably slower as you add widgets? 3 SELF-CONTAINED – so they’re easy to reuse Does the widget work without special page elements such as element ID’s, scripts, and CSS references? 4 MODERN – so they’re easier to write and maintain Is the widget written in a modern JavaScript framework such as AngularJS or Knockout? 5 CENTRALLY MANAGED – update all instances from a single location Do all (or many) instances of the widget work share the same installed files?
- 10. Widgets in Action:BlueMetal Intranet SharePoint Online using Light Branding and Widgets 1. My Clients & Projects List 2. News Feed 3. Tabbed New Hire and Anniversary Carousel 4. Tabbed Calendars/Discussions 5. Twitter Feed
- 11. Introducing Widget Wrangler The"Manifesto" Why Widget Wrangler • Has no dependencies on any other scripts or frameworks • Open source: Share with the community and welcome contributiosn • Is easy to use • Minimizes impact on the overall page when several instances are present • Matches AngularJS 1.x browser support • Helps avoid interference with the hosting page and other widgets • Loads scripts efficiently across all widgets on the page • Allows widgets written with MV* frameworks such as AngularJS and KnockOut, as well as plain old javascript. • Help isolate your code and UI for easy portability to multiple platforms and environments
- 12. Anatomy of aWidget <div> <div ng-controller="main as vm"> <h1>Hello{{vm.space()}}{{vm.name}}!</h1> Who should I say hello to? <input type="text" ng-model="vm.name" /> </div> <script type="text/javascript" src="pnp-ww.js“ ww-appName="HelloApp“ ww-appType="Angular“ ww-appScripts='[{"src": “~/angular.min.js", "priority":0}, {"src": “~/script.js", "priority":1}]'> </script> </div> Widget Root View Widget Wrangler Widget Wrangler always boots to its parent element, the Widget Root. If you boot your own widget, this HTMLElement is passed to your function.
- 13. Widget Wrangler Attributes TagRequired Description ww-appName yes Name for your app (need not be unique); Angular widgets boot to this module. Can be a collection of strings to boot multiple Angular modules. ww-appType no Currently "Angular" is the only supported framework. Widget Wrangler will boot to one or more Angular 1.x modules when scripts are loaded. ww-appBind no Your function to boot your widget when scripts are loaded. Use for any JS framework. ww-appCss no A JSON object* that defines the css files the widget needs in order to run ww-appScripts yes A JSON object* that defines the javascript files the widget needs in order to run [ {"src":"(script1.js)", "priority":0}, {"src": "script2.js", "priority":1} //, … ] * JSON object format Priorities control parallel vs. sequential loading
- 14.
- 15. Anatomy of anAngularJS Widget View (HTML with Bindings) Controller manipulate objects to control the UI Services Web Services Scope or ViewModel Widget Directives new elements and attributes Web Page Module @BASPUG @Bob1Germa n @jfj1997
- 16. demo Angular Widgets Hello World- http://bit.ly/ww-ng1-1 Weather Forecast - http://bit.ly/ww-ng1-2 Connected Widgets - http://bit.ly/ww-ng1-3
- 17. demo Other Frameworks Knockout -http://bit.ly/ww-ko1 Plain JavaScript - http://bit.ly/ww-jq1 Angular 2 - http://bit.ly/ww-ng2-1
- 18.
- 19. Deploying Widgets • Putas much as possible in a CDN or other shared location so it can be updated centrally • Put as little as possible on the target web sites that will run the widget Distribution CDN or other Shared Location Target Site JS Bundles JavaScript HTML templates CSS Minimum needed to host the widget
- 20. Cross-Origin Resource Sharing https://www.evilkittens.com/Getpage HTML Request page HTML https://www.mybank.com/Do an AJAX request X BLOCKED! Get the JavaScript Request some JavaScript https://www.cdn.com/ • Scripts, CSS, and Images referenced by HTML are no problem • AJAX requests across domain names are not allowed by default
- 21. Cross-Origin Resource Sharing https://www.evilkittens.com/Getpage HTML Request page HTML https://www.mybank.com/ Get the JavaScript Request some JavaScript https://www.cdn.com/ Preflight request Cross-origin Policy Do an AJAX request Get the Data “No, really, it’s OK to accept cross- origin requests from evilkittens.com!” Do an AJAX request X BLOCKED! • Common examples: • Calling web services • Reading HTML templates
- 22. WidgetBundling In general, bundlingis good • Faster load times • Automatically versions all assets consistently • Synchronous loads Caveat for widgets • Consider not (or separately) bundling assets shared by other widgets .ts .ts .js .html .less Bundler 0: javascript Compilers (.ts .js, .less .css) Task runner 1: javascript 2: javascript (html in string) 3: javascript 4: javascript (css in string) Javascript bundle Source Files
- 23. Widget Wrangler Backlog •Framework detection (avoid loading twice – maybe with version checking) • Framework Overloading (e.g. multiple versions of jQuery or Angular on the page) • Angular 2.0 support • Diagnostic widget you can add to a page to show load sequence, timings, and exceptions • IE 8 support (to have parity with SharePoint 2013 browser support)
- 24. Resources Widget Wrangler • http://bit.ly/ww-github •http://bit.ly/ww-intro Widget Samples • Angular 1 (Simple) – http://bit.ly/ww-ng1-1 • Angular 1 (Weather) – http://bit.ly/ww-ng1-2 • Angular 1 (Connected) – http://bit.ly/ww-ng1-3 • Angular 2 – http://bit.ly/ww-ng2-1 • jQuery – http://bit.ly/ww-jq1 • Knockout – http://bit.ly/ww-ko1 • Plain JS – http://bit.ly/ww-js1
- 25. www.bluemetal.com | Boston/ New York / Chicago | 800-359-0322 Thank You We appreciate your interest, and look forward to working with you in the future!