Developing JavaScript Widgets
-
Upload
bob-german -
Category
Internet
-
view
29 -
download
0
Transcript of Developing JavaScript Widgets
![Page 1: Developing JavaScript Widgets](https://reader035.fdocuments.us/reader035/viewer/2022081517/5871b3761a28abda6a8b70f3/html5/thumbnails/1.jpg)
Developing JavaScriptWidgetsBoston Code Camp November 19, 2016
Bob GermanPrincipal ArchitectEmail: [email protected]
“Sometimes you have to share the page”
![Page 2: Developing JavaScript Widgets](https://reader035.fdocuments.us/reader035/viewer/2022081517/5871b3761a28abda6a8b70f3/html5/thumbnails/2.jpg)
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
#BOSCC@Bob1German
![Page 3: Developing JavaScript Widgets](https://reader035.fdocuments.us/reader035/viewer/2022081517/5871b3761a28abda6a8b70f3/html5/thumbnails/3.jpg)
• 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?
![Page 4: Developing JavaScript Widgets](https://reader035.fdocuments.us/reader035/viewer/2022081517/5871b3761a28abda6a8b70f3/html5/thumbnails/4.jpg)
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
![Page 5: Developing JavaScript Widgets](https://reader035.fdocuments.us/reader035/viewer/2022081517/5871b3761a28abda6a8b70f3/html5/thumbnails/5.jpg)
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?
![Page 6: Developing JavaScript Widgets](https://reader035.fdocuments.us/reader035/viewer/2022081517/5871b3761a28abda6a8b70f3/html5/thumbnails/6.jpg)
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?
![Page 7: Developing JavaScript Widgets](https://reader035.fdocuments.us/reader035/viewer/2022081517/5871b3761a28abda6a8b70f3/html5/thumbnails/7.jpg)
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?
![Page 8: Developing JavaScript Widgets](https://reader035.fdocuments.us/reader035/viewer/2022081517/5871b3761a28abda6a8b70f3/html5/thumbnails/8.jpg)
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?
![Page 9: Developing JavaScript Widgets](https://reader035.fdocuments.us/reader035/viewer/2022081517/5871b3761a28abda6a8b70f3/html5/thumbnails/9.jpg)
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?
![Page 10: Developing JavaScript Widgets](https://reader035.fdocuments.us/reader035/viewer/2022081517/5871b3761a28abda6a8b70f3/html5/thumbnails/10.jpg)
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
![Page 11: Developing JavaScript Widgets](https://reader035.fdocuments.us/reader035/viewer/2022081517/5871b3761a28abda6a8b70f3/html5/thumbnails/11.jpg)
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
![Page 12: Developing JavaScript Widgets](https://reader035.fdocuments.us/reader035/viewer/2022081517/5871b3761a28abda6a8b70f3/html5/thumbnails/12.jpg)
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.
![Page 13: Developing JavaScript Widgets](https://reader035.fdocuments.us/reader035/viewer/2022081517/5871b3761a28abda6a8b70f3/html5/thumbnails/13.jpg)
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
![Page 14: Developing JavaScript Widgets](https://reader035.fdocuments.us/reader035/viewer/2022081517/5871b3761a28abda6a8b70f3/html5/thumbnails/14.jpg)
demo
jQuery Widgethttp://bit.ly/ww-jq0http://bit.ly/ww-jq1
![Page 15: Developing JavaScript Widgets](https://reader035.fdocuments.us/reader035/viewer/2022081517/5871b3761a28abda6a8b70f3/html5/thumbnails/15.jpg)
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
![Page 16: Developing JavaScript Widgets](https://reader035.fdocuments.us/reader035/viewer/2022081517/5871b3761a28abda6a8b70f3/html5/thumbnails/16.jpg)
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
![Page 17: Developing JavaScript Widgets](https://reader035.fdocuments.us/reader035/viewer/2022081517/5871b3761a28abda6a8b70f3/html5/thumbnails/17.jpg)
demo
Other FrameworksKnockout - http://bit.ly/ww-ko1
Plain JavaScript - http://bit.ly/ww-jq1Angular 2 - http://bit.ly/ww-ng2-1
![Page 18: Developing JavaScript Widgets](https://reader035.fdocuments.us/reader035/viewer/2022081517/5871b3761a28abda6a8b70f3/html5/thumbnails/18.jpg)
demo
Testing Widget Wranglerhttp://bit.ly/ww-tester
![Page 19: Developing JavaScript Widgets](https://reader035.fdocuments.us/reader035/viewer/2022081517/5871b3761a28abda6a8b70f3/html5/thumbnails/19.jpg)
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
![Page 20: Developing JavaScript Widgets](https://reader035.fdocuments.us/reader035/viewer/2022081517/5871b3761a28abda6a8b70f3/html5/thumbnails/20.jpg)
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
![Page 21: Developing JavaScript Widgets](https://reader035.fdocuments.us/reader035/viewer/2022081517/5871b3761a28abda6a8b70f3/html5/thumbnails/21.jpg)
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
![Page 22: Developing JavaScript Widgets](https://reader035.fdocuments.us/reader035/viewer/2022081517/5871b3761a28abda6a8b70f3/html5/thumbnails/22.jpg)
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
![Page 23: Developing JavaScript Widgets](https://reader035.fdocuments.us/reader035/viewer/2022081517/5871b3761a28abda6a8b70f3/html5/thumbnails/23.jpg)
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)
![Page 24: Developing JavaScript Widgets](https://reader035.fdocuments.us/reader035/viewer/2022081517/5871b3761a28abda6a8b70f3/html5/thumbnails/24.jpg)
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
![Page 25: Developing JavaScript Widgets](https://reader035.fdocuments.us/reader035/viewer/2022081517/5871b3761a28abda6a8b70f3/html5/thumbnails/25.jpg)
www.bluemetal.com | Boston / New York / Chicago | 800-359-0322
Thank YouWe appreciate your interest, and look forward to working with you in the future!