Martin Amm of adenin delivers a talk at the Gilbane conference 2015, detailing how, through the use of re-usable and innovative HTML5 Web Components, adenin was capable of developing a mobile-first Digital Workplace app for B2B customers.

1. Google's Polymer web
components let us develop
tomorrow's digital
workplaces today
Martin Amm
Founder & CEO
Case study
adenin TECHNOLOGIES
http://www.adenin.com

2. Copyright © 2015 adenin
adenin TECHNOLOGIES
▪ Building Intranet, Collaboration, Workflow and Portal solutions since 1999
▪ In the last years we’ve seen a huge increase in requests for mobile apps
▪ But most of the time mobile apps for business use cases were found to be
unpayable
▪ The recent IDC “2015 Survey: Building the Mobile Enterprise” confirmed that 64%
of the IT decision-makers claim mobile is of high or critical importance, but only
36% of applications are available via smartphone
▪ Budget limits and lack of mobile developers are the main constraints
▪ Using prefabricated components can help to overcome the limitations in building
Digitial Workplace apps

3. Tomorrow's digital
workplaces requirements

4. Digital Workplace - Get all your work done
anywhere, anytime

5. Copyright © 2015 adenin
Tomorrow’s digital workplaces - Requirements
▪ Must work on any form factor: watch, phone,
phablet, tablet, laptop, desktop
▪ Must work on any platform: iOS, Android,
Windows, OSX, Linux
▪ Must not be yet another silo
▪ Must integrate with cloud services
▪ Must integrate with on-premises applications and
services

6. Copyright © 2015 adenin
Tomorrow’s digital workplaces - Requirements
▪ Must be easily composed with proven, reusable
components

7. Copyright © 2015 adenin
HTML is only for web
pages.
It cannot be used to build
reusable components.
?

8. Web Components

9. Copyright © 2015 adenin
Web Components – the future of web development
▪ Web Components add extensibility, encapsulation and
interoperability to HTML
▪ Web Components are a “family” of multiple,
complementary technologies:
▪ Custom Elements - safely extend HTML
▪ HTML Templates - reusable HTML blocks
▪ HTML Imports - load modules instead of pages
▪ Shadow DOM - hide implementation details
▪ CSS Variables – flexible styling

10. Copyright © 2015 adenin
Web Components – the future of web development
Plain HTML
Web Component
▪ Less code – the code I
don‘t have to write is the
code I don‘t need to debug
and maintain
▪ <simple-card> is self-
explanatory, not just a
“soup” of generic <div>
▪ Separation of content and
style as no classes need
to be used
▪ Promotes reuse

11. Copyright © 2015 adenin
Web Components – the future of web development
▪ Started by Google in 2013
▪ 2015 collaboration between Google, Mozilla, Microsoft,
Apple and others
▪ World Wide Web Consortium (W3C) Drafts

12. Copyright © 2015 adenin
Web Components – Browser support
▪ Native support in Chrome
▪ Fast JavaScript implementation ("Polyfill") for IE11/MS Edge, Safari, Firefox
▪ Microsoft started implementation in July 2015, Roadmap Priority: High
▪ Apple started implementation in October 2015

13. Copyright © 2015 adenin
Web Components – the future web development
▪ In large scale production at Google, e.g. Play Music
▪ Google Accelerated Mobile Pages (AMP) Project is
based on web components
▪ Vendors provide web component libraries e.g.
▪ IBM, http://ibm-js.github.io/delite/
▪ Salesforce, https://github.com/ForceDotComLabs/mobile-ui-
elements
▪ Telerik, http://docs.telerik.com/kendo-ui/webcomponents

14. Google’s Polymer

15. Copyright © 2015 adenin
What is Google’s Polymer?
▪ Polymer extends webcomponents and
makes it easier to define custom elements
▪ Polymer is a library and not a complete
framework
▪ Polymer is the only cross browser library
maintained by a browser vendor (Polymer
team is part of Chrome team)
▪ Polymer Elements is a catalog of ready-to-
use web components
▪ Basic elements (e.g. buttons and icons)
▪ Material design elements (e.g. cards, toggles)
▪ Wrapper for Google products (e.g. Maps,
YouTube)

16. Copyright © 2015 adenin
Tangere Elements
▪ Polymer Elements cover common uses
cases
▪ We build a catalog of additional Polymer
elements called “Tangere”
▪ Business Charts
▪ Responsive Forms & form designer
▪ Rules Engine
▪ Voice recognition
▪ 50+ Tangere Elements are also Open
Source
▪ Polymer & Tangere elements allow to quickly
compose custom workplace apps

17. Workplace Backend

18. Copyright © 2015 adenin
Workplace Backend
▪ Polymer runs only in browser, so it requires backend services to become a full,
modular workplace:
▪ User & identity management, integrated with ActiveDirectory, Oauth
▪ API Hub to securely connect with existing services and databases
▪ App version management and delivery
▪ App store and user preference management
▪ Usage reporting
▪ We finally created a packaged, end-to-end solution as the “Mobility Portal”

19. Copyright © 2015 adenin
Complete solution: Mobility Portal backend

20. Project in review

21. Copyright © 2015 adenin
Project in Review
▪ Workplace project started early, May 2014 with Polymer 0.3
▪ Google Polymer team very committed and responsive, great community
▪ Polymer exceeded all our expectations and allows us now to quickly compose
digital workplaces from a catalog of predefined components
▪ The inherent economies of scale allow to build mobile apps even for small
audiences
▪ The collaboration of all major browser vendors in W3C assure that web
components are the first neutral and standardized way to build cross-device apps
▪ webcomponent.js polyfill is the transitional technology allowing to realize the
benefits of web components today

22. Copyright © 2015 adenin
Questions ?

23. Copyright © 2015 adenin
Thank you.
martin.amm@adenin.com
www.adenin.com
www.mobilityportal.com