Presentation at the Northeast JavaScript Conference in Stamford, CT

1. Northeast JavaScript Conference #NEJSConference
Developing JavaScript
Widgets
Sometimes you have to
share the web page …
@Bob1German

2. Bob German
Bob is a 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
#NEJSConf
@Bob1German

3. •
•
•
•
What is a widget?

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 a good 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?

6. 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

7. 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

8. 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.

9. 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

10. demo
jQuery Widget
http://bit.ly/ww-jq0
http://bit.ly/ww-jq1

11. Anatomy of an AngularJS 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

12. 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

13. demo
Other Frameworks
Knockout - http://bit.ly/ww-ko1
Plain JavaScript - http://bit.ly/ww-jq1
Angular 2 - http://bit.ly/ww-ng2-1

14. demo
Testing Widget Wrangler
http://bit.ly/ww-tester

16. Deploying Widgets
• Put as 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

17. Cross-Origin Resource Sharing
https://www.evilkittens.com/Get page 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

18. Cross-Origin Resource Sharing
https://www.evilkittens.com/Get page 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

19. WidgetBundling
In general, bundling is 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

20. 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)

21. 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

22. thank
you