Northeast JavaScript Conference

#NEJSConference

Developing JavaScript Widgets

Sometimes you have to share the web page …

@Bob1German

Bob GermanBob is a Principal Architect at BlueMetal, where he leads Office 365 and SharePoint development for enterprise customers.

Cloud & ServicesContent & CollaborationData & AnalyticsDevices & MobilityStrategy & Design

An Insight company

#NEJSConf@Bob1German

• Commonly used on the Internet called ”Web Widgets”, ”Plugins”, ”Embeds”, etc.

• It’s just a clever piece of HTML and Javascript that acts like a web part

• Developed seperately from the page it runs on – often added later on by an end user

• Very useful in Content Management systems (Wordpress, SharePoint, etc.)

What is a widget?

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

One Widget

Wordpress

SharePoint

SalesForce

Custom

web page

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?

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

Introducing Widget WranglerThe "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

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.

Widget Wrangler Attributes

Tag Required Descriptionww-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 runww-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

demo

jQuery Widgethttp://bit.ly/ww-jq0http://bit.ly/ww-jq1

Anatomy of an AngularJS Widget

View(HTML with Bindings)

Controllermanipulate objects to control the UI

Services

WebServices

Scope or ViewModel

Widget

Directivesnew elements and

attributes

Web Page

Module

@BASPUG@Bob1German@jfj1997

demo

Angular WidgetsHello World - http://bit.ly/ww-ng1-1

Weather Forecast - http://bit.ly/ww-ng1-2Connected Widgets - http://bit.ly/ww-ng1-3

demo

Other FrameworksKnockout - http://bit.ly/ww-ko1

Plain JavaScript - http://bit.ly/ww-jq1Angular 2 - http://bit.ly/ww-ng2-1

demo

Testing Widget Wranglerhttp://bit.ly/ww-tester

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 BundlesJavaScriptHTML templatesCSS

Minimum needed to host the widget

Cross-Origin Resource Sharing

https://www.evilkittens.com/Get page HTML

Request page HTML

https://www.mybank.com/Do an AJAX requestX

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

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 requestX

BLOCKED!

• Common examples:• Calling web services• Reading HTML templates

Wid

get B

undl

ing

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

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)

ResourcesWidget 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

thankyou