By clearly separating IBM Domino data from the web page, Domino REST services can open the door to a new world of interactive web applications. Learn about emerging web standards, including Web Components, that reflect new paradigms and help you create more interactive web applications. Find out what's new in Domino REST services and see examples of state-of-the-art applications that combine emerging web standards and REST.
BP204 - Take a REST and put your data to work with APIs!Craig Schumann
Today, the web is buzzing with the talk about web APIs. It seems that everyone - Facebook, Twitter, Netflix - has some sort of API you can use to integrate with their services. APIs are fundamental to how services on the web work today and data is the new currency. Knowing how to put them to work or how to roll your own can be a huge addition to your development toolbox. This session is all about web-based APIs (like REST). If you have only the vaguest idea about what an API is, or have ever wondered what REST was all about -- then this session is for you! We'll cover examples of using common public APIs and how you can put them to work in your own apps, and how to go about creating your own APIs, or use the REST services in IBM Domino.
REST services and IBM Domino/XWork - DanNotes 19-20. november 2014John Dalsgaard
Loose coupling of systems is key to future development! Why? Because it will allow us to change the "components" as we go along instead of creating monster big systems that are tied together using all sorts of different technologies. Webservices have been a way to obtain this over the last decade. More recently a special variant has become very popular, namely the JSON based REST service.
Imagine you could extend your data out to the world outside your Domino environment? - in an easy way....! And imagine those data could easily be incorporated into other systems via standardized interfaces... Could that extend the value of your current systems further? Could this be a way to use new technologies to modernize your users' experience of working with your systems?
Come and take away knowledge about how to open your Domino/XWork based systems up to the world outside using JSON based REST services. They are going to be key to future development in Domino/XWork - whether you want to use data in browser solutions (e.g. based on angular.js or ExtJS) or native mobile apps (built in whatever technology is best).
Web services tutorial slides from my session at DPC 2012 in Amsterdam. In this 3-hour session we built the simplest possible service, and then extended it, looking at RPC, REST and SOAP along the way.
This presentation was given at SharePoint Saturday Virginia Beach 2012. The topic covers some SharePoint based solutions that directly benefit from HTML5 features.
BP204 - Take a REST and put your data to work with APIs!Craig Schumann
Today, the web is buzzing with the talk about web APIs. It seems that everyone - Facebook, Twitter, Netflix - has some sort of API you can use to integrate with their services. APIs are fundamental to how services on the web work today and data is the new currency. Knowing how to put them to work or how to roll your own can be a huge addition to your development toolbox. This session is all about web-based APIs (like REST). If you have only the vaguest idea about what an API is, or have ever wondered what REST was all about -- then this session is for you! We'll cover examples of using common public APIs and how you can put them to work in your own apps, and how to go about creating your own APIs, or use the REST services in IBM Domino.
REST services and IBM Domino/XWork - DanNotes 19-20. november 2014John Dalsgaard
Loose coupling of systems is key to future development! Why? Because it will allow us to change the "components" as we go along instead of creating monster big systems that are tied together using all sorts of different technologies. Webservices have been a way to obtain this over the last decade. More recently a special variant has become very popular, namely the JSON based REST service.
Imagine you could extend your data out to the world outside your Domino environment? - in an easy way....! And imagine those data could easily be incorporated into other systems via standardized interfaces... Could that extend the value of your current systems further? Could this be a way to use new technologies to modernize your users' experience of working with your systems?
Come and take away knowledge about how to open your Domino/XWork based systems up to the world outside using JSON based REST services. They are going to be key to future development in Domino/XWork - whether you want to use data in browser solutions (e.g. based on angular.js or ExtJS) or native mobile apps (built in whatever technology is best).
Web services tutorial slides from my session at DPC 2012 in Amsterdam. In this 3-hour session we built the simplest possible service, and then extended it, looking at RPC, REST and SOAP along the way.
This presentation was given at SharePoint Saturday Virginia Beach 2012. The topic covers some SharePoint based solutions that directly benefit from HTML5 features.
MongoDB's flexible schema makes it a great fit for your next content management application as its data model makes it easy to catalog multiple content types with diverse meta data. In this session, we'll review schema design for content management, using GridFS for storing binary files, and how you can leverage MongoDB's auto-sharding to partition your content across multiple servers.
Everything is Awesome - Cutting the Corners off the WebJames Rakich
The web is awesome despite it's detractors. But we can't forget our fundamentals when we're trying to forge ahead with new tech. This talk is about how to approach the building blocks of the web in a way that takes advantage of their strengths and avoids their weaknesses.
Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components.
Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template.
A component must belong to an NgModule in order for it to be available to another component or application. To make it a member of an NgModule, list it in the declarations field of the NgModule metadata.
Content Management with MongoDB by Mark HelmstetterMongoDB
MongoDB is great for content management and delivery across a multitude of apps such as e-commerce websites, online publications, web content management systems (CMS), document management, archives and others. MongoDB's flexible schema and data model make it easy to catalog multiple content types with diverse meta data.
-Schema design for content management
-Using GridFS for storing binary files
-How you can leverage MongoDB's auto-sharding to partition your content across multiple servers
Backbone.js helps structure you javascript application code in a scalable way.
In this keynote I demonstrate how to use it in a simple walk-through example, and discuss the advantages of using an MVC framework.
MongoDB's flexible schema makes it a great fit for your next content management application as its data model makes it easy to catalog multiple content types with diverse meta data. In this session, we'll review schema design for content management, using GridFS for storing binary files, and how you can leverage MongoDB's auto-sharding to partition your content across multiple servers.
avaScript, REST, CSOM, Office 365 APIs: Like it or not, client-side development is the future of SharePoint development. At the forefront of this wave is the powerful JavaScript library jQuery. Utilizing jQuery in SharePoint, developers can take their applications to the next level in less time. What's more, you can utilize jQuery in SharePoint 2007, 2010, 2013, and in Office 365 often without making changes to your code. In this class, you gain a new appreciate for jQuery and learn:
"What's possible," including visual enhancements and practical business intelligence
Tips and Tricks for deploying and maintaining scripts
How to get quick wins with little effort using third-party jQuery libraries
How to interact with SharePoint forms and lists using JavaScript and jQuery
The SharePoint & jQuery Guide - Updated 1/14/14Mark Rackley
Latest version of my SharePoint & jQuery slides from SharePoint Saturday St. Louis.
This session introduces people to using jQuery in SharePoint, how to get started, and some best practices.
IBM Connect 2014 AD 501 - IBM Worklight for IBM Domino DevelopersMat Newman
IBM Domino 9 easily exposes the Domino Data Service (DDS) to enable you to access data in IBM Notes Databases utilising REST APIs. But how do you get started building native mobile applications? With IBM Worklight, and DDS! We will demonstrate how to install, configure and then build your first mobile application.
MongoDB's flexible schema makes it a great fit for your next content management application as its data model makes it easy to catalog multiple content types with diverse meta data. In this session, we'll review schema design for content management, using GridFS for storing binary files, and how you can leverage MongoDB's auto-sharding to partition your content across multiple servers.
Everything is Awesome - Cutting the Corners off the WebJames Rakich
The web is awesome despite it's detractors. But we can't forget our fundamentals when we're trying to forge ahead with new tech. This talk is about how to approach the building blocks of the web in a way that takes advantage of their strengths and avoids their weaknesses.
Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components.
Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template.
A component must belong to an NgModule in order for it to be available to another component or application. To make it a member of an NgModule, list it in the declarations field of the NgModule metadata.
Content Management with MongoDB by Mark HelmstetterMongoDB
MongoDB is great for content management and delivery across a multitude of apps such as e-commerce websites, online publications, web content management systems (CMS), document management, archives and others. MongoDB's flexible schema and data model make it easy to catalog multiple content types with diverse meta data.
-Schema design for content management
-Using GridFS for storing binary files
-How you can leverage MongoDB's auto-sharding to partition your content across multiple servers
Backbone.js helps structure you javascript application code in a scalable way.
In this keynote I demonstrate how to use it in a simple walk-through example, and discuss the advantages of using an MVC framework.
MongoDB's flexible schema makes it a great fit for your next content management application as its data model makes it easy to catalog multiple content types with diverse meta data. In this session, we'll review schema design for content management, using GridFS for storing binary files, and how you can leverage MongoDB's auto-sharding to partition your content across multiple servers.
avaScript, REST, CSOM, Office 365 APIs: Like it or not, client-side development is the future of SharePoint development. At the forefront of this wave is the powerful JavaScript library jQuery. Utilizing jQuery in SharePoint, developers can take their applications to the next level in less time. What's more, you can utilize jQuery in SharePoint 2007, 2010, 2013, and in Office 365 often without making changes to your code. In this class, you gain a new appreciate for jQuery and learn:
"What's possible," including visual enhancements and practical business intelligence
Tips and Tricks for deploying and maintaining scripts
How to get quick wins with little effort using third-party jQuery libraries
How to interact with SharePoint forms and lists using JavaScript and jQuery
The SharePoint & jQuery Guide - Updated 1/14/14Mark Rackley
Latest version of my SharePoint & jQuery slides from SharePoint Saturday St. Louis.
This session introduces people to using jQuery in SharePoint, how to get started, and some best practices.
IBM Connect 2014 AD 501 - IBM Worklight for IBM Domino DevelopersMat Newman
IBM Domino 9 easily exposes the Domino Data Service (DDS) to enable you to access data in IBM Notes Databases utilising REST APIs. But how do you get started building native mobile applications? With IBM Worklight, and DDS! We will demonstrate how to install, configure and then build your first mobile application.
IBM ConnectED SPOT104: Lightning-Fast Development of Native Mobile Apps for I...darwinodb
This is the presentation that John Tripp & Phil Riand made at IBMConnectED introducing Darwino, a new full-stack enterprise development platform for social and mobile cloud enabled applications that work natively on mobile devices - even offline.
These slides provide detailed step by step deployment of the 9.0.1 IBM Notes/Domino OpenSocial Component, Integration with IBM Connections, and Troubleshooting steps.
This talk, a case study in application deployment models, was given at IBM InterConnect 2017 in Las Vegas, NV on March 21, 2017 by Lin Sun & Phil Estes of IBM Cloud.
In this talk, Lin & Phil provided a background of IBM Bluemix compute offerings across Cloud Foundry, Containers + Kubernetes, and FaaS/serverless via OpenWhisk and then used a demo application to describe the tradeoffs between using the various deployment models and technology. The application is open source and available at https://github.com/estesp/flightassist
Philipe Riand - Building Social Applications using the Social Business Toolki...LetsConnect
Adding social features to new or existing applications has never been easier with the advent of the Social Business Toolkit SDK. At this session we will discuss how social features can add real business value and you will see how easily they can be built using the SDK. The SDK heralds a transformation is how you develop applications on the IBM Social Platform so come along learn more.
Similar to IBM Connect 2014 - AD205: Creating State-of-the-Art Web Applications with Domino REST Services (20)
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionAggregage
Join Maher Hanafi, VP of Engineering at Betterworks, in this new session where he'll share a practical framework to transform Gen AI prototypes into impactful products! He'll delve into the complexities of data collection and management, model selection and optimization, and ensuring security, scalability, and responsible use.
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...SOFTTECHHUB
The choice of an operating system plays a pivotal role in shaping our computing experience. For decades, Microsoft's Windows has dominated the market, offering a familiar and widely adopted platform for personal and professional use. However, as technological advancements continue to push the boundaries of innovation, alternative operating systems have emerged, challenging the status quo and offering users a fresh perspective on computing.
One such alternative that has garnered significant attention and acclaim is Nitrux Linux 3.5.0, a sleek, powerful, and user-friendly Linux distribution that promises to redefine the way we interact with our devices. With its focus on performance, security, and customization, Nitrux Linux presents a compelling case for those seeking to break free from the constraints of proprietary software and embrace the freedom and flexibility of open-source computing.
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfPaige Cruz
Monitoring and observability aren’t traditionally found in software curriculums and many of us cobble this knowledge together from whatever vendor or ecosystem we were first introduced to and whatever is a part of your current company’s observability stack.
While the dev and ops silo continues to crumble….many organizations still relegate monitoring & observability as the purview of ops, infra and SRE teams. This is a mistake - achieving a highly observable system requires collaboration up and down the stack.
I, a former op, would like to extend an invitation to all application developers to join the observability party will share these foundational concepts to build on:
Enhancing Performance with Globus and the Science DMZGlobus
ESnet has led the way in helping national facilities—and many other institutions in the research community—configure Science DMZs and troubleshoot network issues to maximize data transfer performance. In this talk we will present a summary of approaches and tips for getting the most out of your network infrastructure using Globus Connect Server.
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofsAlex Pruden
This paper presents Reef, a system for generating publicly verifiable succinct non-interactive zero-knowledge proofs that a committed document matches or does not match a regular expression. We describe applications such as proving the strength of passwords, the provenance of email despite redactions, the validity of oblivious DNS queries, and the existence of mutations in DNA. Reef supports the Perl Compatible Regular Expression syntax, including wildcards, alternation, ranges, capture groups, Kleene star, negations, and lookarounds. Reef introduces a new type of automata, Skipping Alternating Finite Automata (SAFA), that skips irrelevant parts of a document when producing proofs without undermining soundness, and instantiates SAFA with a lookup argument. Our experimental evaluation confirms that Reef can generate proofs for documents with 32M characters; the proofs are small and cheap to verify (under a second).
Paper: https://eprint.iacr.org/2023/1886
Pushing the limits of ePRTC: 100ns holdover for 100 daysAdtran
At WSTS 2024, Alon Stern explored the topic of parametric holdover and explained how recent research findings can be implemented in real-world PNT networks to achieve 100 nanoseconds of accuracy for up to 100 days.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
2. Please Note
IBM’s statements regarding its plans, directions, and intent are subject to change or withdrawal without notice at IBM’s sole
discretion.
Information regarding potential future products is intended to outline our general product direction and it should not be
relied on in making a purchasing decision.
The information mentioned regarding potential future products is not a commitment, promise, or legal obligation to deliver
any material, code or functionality. Information about potential future products may not be incorporated into any contract.
The development, release, and timing of any future features or functionality described for our products remains at our sole
discretion
Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment.
The actual throughput or performance that any user will experience will vary depending upon many factors, including
considerations such as the amount of multiprogramming in the user’s job stream, the I/O configuration, the storage
configuration, and the workload processed. Therefore, no assurance can be given that an individual user will achieve
results similar to those stated here.
The content reflects the presenters' own views and does not necessarily represent IBM's positions, strategies or opinions.
No official endorsement should be inferred.
2
3. Trademarks and Registered Trademarks
To be used in this presentation
3
IBM ®
Domino ®
Chrome™
Firefox ®
Internet Explorer ®
Safari ®
OSGi™
5. Why Domino REST Services?
Separation of UI, data and
business logic
Rich Client
Phone
API
Tablet
Appliance
Server
5
Web Browser
Enable access from any
device / OS
Extend reach beyond
traditional Domino
ecosystem
6. Overview of REST in Domino
Multiple services; multiple data models
Service name
Resource types
Data service
/api/data
Database, View, View
entry, Document
Calendar service
/api/calendar
Calendar entry,
Calendar notice
Mail service
/api/mail
Mail message,
Delegate, Quota
Freebusy service
6
Root resource
/api/freebusy
Busy time, Free room
8. Overview of REST in Domino
Consistent syntax
8
Correct use of GET, POST, PUT & DELETE verbs (HTTP
uniform interface)
Consistent JSON property names
–
href, displayName, email, etc.
Consistent query parameters
–
format, count, sortcolumn, sortorder, etc.
Navigate between resources using href properties (see
HATEOAS)
9. Overview of Domino REST Services
Decoupled from XPages and Domino Designer
9
Compliments, but doesn't require Xpages
Access Domino from a web application, native
mobile app, embedded system, etc.
Build your application in any IDE
Use any web application framework
–
Dojo, jQuery, Web components, etc.
Strategically important for integrating with other
IBM products
10. Domino Access Services Framework
Domino Access Services (DAS) is a
framework for adding REST services to
Domino
Domino Server
Built with OSGi and Apache Wink
DAS Servlet
IBM delivers each service first to
OpenNTF; then to a supported release
...
Apache Wink
Runtime
Domino Web Engine
(native code)
Customers and business partners may
eventually be able to add services too
Phone
10
Calendar
Service
Plug-in
Mail
Service
Plug-in
Tablet
Server
Browser
11. Domino REST Services by Release
Service name
9.0
9.0.1
Extlib on
OpenNTF
DAS framework
Yes
Yes
Yes
Yes
Data service
Yes
Yes
Yes
Yes
Calendar
service
No
No
Yes
Yes
Mail service
No
No
No
Yes
Freebusy
service
11
8.5.3 UP1
No
No
No
Yes
12. Sample Applications on OpenNTF
12
Dojo calendar application
–
http://extlib.openntf.org/
–
Don't forget to install updateSiteOpenNTFSamples.zip!
Web components sample (data service)
–
http://www.openntf.org/internal/home.nsf/project.xsp?
action=openDocument&name=Web%20Components%20Samples%20for%20Domino
%20Access%20Services
Discussion application for Android (data service)
–
http://www.openntf.org/Internal/home.nsf/project.xsp?
action=openDocument&name=DomDisc%20for%20Android
13. More Domino REST Service Resources
13
Integration with Social Business
Toolkit (SBT)
–
SBT API Explorer on
Greenhouse
–
JavaScript library in SBT SDK
(coming soon)
Documentation on the Application Development wiki
–
http://www-10.lotus.com/ldd/ddwiki.nsf/xpAPIViewer.xsp?
lookupName=IBM+Domino+Access+Services+9.0.1#action=openDocument&
content=catcontent&ct=api
15. What if you want...
15
A slider UI as well as a text box in your application, and...
Let them talk each other?
16. Lots of stuff...
To reuse UI components
You bring in a (or more) JavaScript library/framework(s)
You bring in code for the UI components
You bring in CSS required for the UI components
You understand specifics of JavaScript library/framework(s)
More code to let them talk each other
<html>
<head>
<link rel="stylesheet" type="text/css" href="../dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="../dijit/themes/claro/claro.css">
<script type="text/javascript" src="../dojo/dojo.js"
data-dojo-config="parseOnLoad: 1, async: 1, deps: ['dojo/parser']"></script>
</head>
<body class="claro">
<input data-dojo-type="dijit/form/HorizontalSlider"
data-dojo-props="value: 0">
<input data-dojo-type="dijit/form/NumberTextBox"
data-dojo-props="value: 0">
</body>
</html>
16
18. What if...
It's as simple as using newer HTML5 components
You can create them and application can import and use them
You can let them talk each other as simple as binding attributes?
<html>
<body>
<input type="range" max="255" value="{{thenumber}}">
<input type="number" value="{{thenumber}}">
</body>
</html>
18
20. Under the umbrella of Web Components
20
HTML Templates
–
Inert DOM, can be cloned and put it to active DOM
Shadow DOM
–
Encapsulation of DOM
●
CSS boundary
Custom Elements
–
Create new HTML element - New vocabulary for HTML you can define
–
Extend existing elements with new programmatic APIs
HTML Imports
–
Import HTML in a similar manner as CSS
Template Binding (Not yet standardized)
–
Connect components automatically
22. HTML Templates
Inert DOM, can be cloned and put it to active DOM
<template id="my-template">
<!-- Image not fetched until it goes in active DOM -->
<img src="my-image.png">
<!-- Script not executed until it goes in active DOM -->
<script type="text/javascript" async>
alert("Foo");
</script>
</template>
HTML in it is parsed, and DOM is created for the inner content, but...
template.childNodes is empty, as the content is in a separate DOM
(template.content, a document fragment)
The content is not rendered (<img> is not fetched, <script> is not executed, etc.)
The content can be cloned, and put to regular DOM. It's rendered then
document.querySelector("div").appendChild(template.content.cloneNode(true));
22
25. Shadow DOM
Before diving into it...
If you click on the gear icon in
Chrome Developer Tools,
you'll see a check box to show
Shadow DOM
25
26. Shadow DOM
Exposing something browser vendors have been using already...
<input type="range"> has inner UI in HTML, but:
<input type="range"> does not have any
child nodes
Such inner UI cannot be accessed from regular
DOM tree
Other examples: <video>, <textarea>
26
27. Shadow DOM
Create functional boundary between widget UI and application UI
27
Rendered, but separate DOM tree
–
Can be created by shadowHost.createShadowRoot() and accessed by
shadowHost.shadowRoot (Note: These two are currently vendor-prefixed)
–
Shadow DOM content cannot be accessed via document.getElementById(),
document.querySelector(), etc.
–
To access Shadow DOM content, use shadowRoot.querySelector(),
shadowRoot.getElementById(), etc.
Encapsulates style
–
Style sheet in Shadow DOM only affects shadow DOM
–
Page's style does not affect Shadow DOM
●
Can be changed by applyAuthorStyles property in Shadow Root
28. Insertion points
<content> works as a insertion point, puts Shadow Host's content into Shadow DOM
<style type="text/css">
.highlight { color: red; } Content in Shadow DOM
</style>
<div class="highlight">
Important items:
<ul>
<content select=".important-item"></content>
</ul>
</div>
<div>
Regular items:
<ul><content></content></ul>
<div id="my-items">
</div>
<li>Upgrade my PC</li>
<li class="important-item">
Talk about future web standard
</li>
<li>Get trip approval</li>
Shadow Host's content </div>
28
29. Insertion points
Creates a render tree having Shadow Host's content in Shadow DOM
<div id="my-items">
#shadow-root
<style type="text/css">.highlight { color: red; }</style>
<div class="highlight">
Important items:
<ul>
<li class="important-item">
Shadow Host's
Talk about future web standard
</li>
</ul>
</div>
<div>
Regular items:
<ul>
<li>Upgrade my PC</li>
<li>Get trip approval</li>
</ul>
</div>
</div>
29
content
32. Custom Elements
Create your own element
Defined by document.register("my-element", {prototype: proto});
Custom element tag name needs “-” to avoid name collision
32
Once it's defined, you can use:
–
<my-form></my-form>
–
document.createElement("my-element")
–
new Class()
Has lifecycle callbacks
–
createdCallback()
–
enteredViewCallback()
–
leftViewCallback()
–
attributeChangedCallback()
33. Custom Elements
You can use it in the exact same way as regular HTML elements
var proto = Object.create(HTMLDivElement.prototype);
proto.createdCallback = function(){ // Lifecycle callback
var root = this.createShadowRoot();
root.textContent = "My text...";
};
proto.foo = function(){ alert("Foo!"); }
var clz = document.register("my-element",
{prototype: proto}); // Custom tag name needs "-"
var myElement = document.createElement("my-element");
// Shows an alert box
myElement.foo();
//// Or you can do...
// var myElement = new clz();
33
34. Custom Elements
34
Supported by:
– Chrome (Latest behind a flag, Canary by default)
– Firefox (Latest behind a flag)
But not (yet) by:
– IE
– Safari
36. HTML Imports
Load external HTML content, in a similar manner as JavaScript or CSS
36
Adds rel="import" support to <link>
–
Default content type will become HTML
No refetch: If the content has been imported already, content is reused
Can be nested: Content from <link rel="import"> can have <link rel="import">,
too
40. TemplateBinding
Auto-repeat
<template id="main-template" bind>
<template> with auto<ul>
repeat definition
<template repeat="{{list}}">
(repeat="{{property}}")
<li>{{name}}</li>
</template>
</ul>
</template>
var list = [
{name: "Anne"},
{name: "Ben"},
{name: "Chad"}
Instantiating <template>
with repeating data
];
document.getElementById("main-template").model = {
list: list
};
// John will be added as <li>
list.push({name: "John"});
40
41. Template Binding
41
Not standardized yet
– Standardization effort for now is around more lower-level APIs, like:
●
Object.observe() (Supported by latest Chrome behind a flag)
●
Array.observe() (Supported by latest Chrome behind a flag)
●
DOM Mutation Observers (Supported by IE11, latest
Firefox/Chrome/Safari)
●
HTML Templates (Supported by latest Firefox/Chrome)
43. Declarative custom element definition
By <polymer-element>, sugar layer on top of Web Components
<polymer-element name="my-fader" extends="div" attributes="faded">
<!-- Template content automatically goes in Shadow DOM -->
<template>
<style type="text/css">
<!-- Import <my-fader> definition -->
/* Only affects <div> in Shadow DOM */
<link rel="import"
div {
href="./my-fader.html">
transition: opacity 2s linear 0;
<template id="main-template" bind>
}
Fade out:
</style>
<input type="checkbox"
<div><content></content></div>
checked="{{faded}}">
</template>
<my-fader faded="{{faded}}">
<script type="text/javascript">
Text
// Internally calls document.register
</my-fader>
Using
Polymer("my-fader", {
</template>
// Called when faded is changed
custom
fadedChanged: function(){
element
this.shadowRoot.querySelector("div").style.opacity
= this.faded ? "0" : "";
}
});
Custom element definition
</script>
</polymer-element>
43
44. What is with Domino REST Services and
Web Components, by the way?
44
45. Custom element reflecting REST data
Basic form example
<polymer-element name="my-form" extends="div"
<link rel="import" href="./my-form.html">
attributes="Subject Body" noscript>
<template id="main-template" bind>
<template>
<my-form
Using
<div>
Subject="{{Subject}}"
<input type="text" value="{{Subject}}">
Body="{{Body}}">
custom
<textarea value="{{Body}}"></textarea>
</my-form>
element
</div>
</template>
Custom element definition
</template>
</polymer-element>
// Let MyStore be a class fetching REST data from server
var store = new MyStore();
store.get(uniqueId).then(function(data){
Instantiating
// data is like:
// {
<template>
//
Subject: "Hi",
with data
//
Body: "Hi, Anne!"
// }
document.getElementById("main-template").model = data;
});
45
46. Custom element reflecting REST data
Repeating view row example
<polymer-element name="my-listview-row"
extends="div" attributes="Who Subject" noscript>
<template>
<div class="listview-row">
<div>{{Who}}</div>
<div>{{Subject}}</div>
</div>
Custom element definition
</template>
</polymer-element>
<link rel="import"
href="./my-listview-row.html">
<template id="main-template" bind>
<template repeat="{{list}}">
<my-listview-row
Who="{{Who}}"
Subject="{{Subject}}">
</my-listview-row>
</template>
</template>
var list = [];
document.getElementById("main-template").model = {
list: list
};
// Let MyStore be a class fetching REST data from server
var store = new MyStore();
Instantiating
store.query().then(function(data){
<template> with data
// data is like:
// [{Who: "Anne", Subject: "Hello, Anne"}, ...];
[].push.apply(list, data); // UI updated automatically
});
46
Using
custom
element
50. To learn more...
50
Introduction to Web Components: http://w3c.github.io/webcomponents/explainer/
HTML Templates:
https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html
Shadow DOM: http://w3c.github.io/webcomponents/spec/shadow/
Custom Elements: http://w3c.github.io/webcomponents/spec/custom/
HTML Imports: http://w3c.github.io/webcomponents/spec/imports/
Object.observe() and Array.observe():
http://wiki.ecmascript.org/doku.php?id=harmony:observe
DOM Mutation Observers:
https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#mutation-observers
Polymer: http://www.polymer-project.org/
51. Business Considerations Drive the Way Customers Consume Software
SaaS / Public Cloud
Dedicated Cloud
On Premises
Agility and Price Advantage
Customization, Flexibility
Pay per use, standard terms of use
You own the license or capital
Automatic updates
Choice of where and how data is managed
Shared infrastructure and ops
Completely customizable
Instant scale
Dedicated infrastructure
Considerations
51
How do I buy?
How quickly can I get new features?
Does it matter where data resides?
How important is price?
Do I need to scale up and down rapidly ?
Who manages?
Do I need to customize? Special integrations?
52. Engage Online
SocialBiz User Group socialbizug.org
– Join the epicenter of Notes and Collaboration user groups
Follow us on Twitter
– @IBMConnect and @IBMSocialBiz
LinkedIn http://bit.ly/SBComm
– Participate in the IBM Social Business group on LinkedIn:
Facebook https://www.facebook.com/IBMSocialBiz
– Like IBM Social Business on Facebook
Social Business Insights blog ibm.com/blogs/socialbusiness
– Read and engage with our bloggers
52
53. Access Connect Online to complete your session surveys using any:
– Web or mobile browser
– Connect Online kiosk onsite
53