Embed Size (px)
Citation preview
Google's Polymer web components let us develop tomorrow's digital workplaces todayMartin Amm Founder & CEO
Case study
adenin TECHNOLOGIEShttp://www.adenin.com
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
Tomorrow's digital workplaces requirements
Digital Workplace - Get all your work done anywhere, anytime
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
Copyright © 2015 adenin
Tomorrow’s digital workplaces - Requirements
▪ Must be easily composed with proven, reusable components
Copyright © 2015 adenin
HTML is only for web pages.It cannot be used to build reusable components.
?
Web Components
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
Copyright © 2015 adenin
Web Components – the future of web developmentPlain 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
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
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
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
Google’s Polymer
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)
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
Workplace Backend
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”
Copyright © 2015 adenin
Complete solution: Mobility Portal backend
Project in review
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
Copyright © 2015 adenin
Questions ?
