Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Google's Polymer web
components let us develop
tomorrow's digital
workplaces today
Martin Amm
Founder & CEO
Case study
ade...
Copyright © 2015 adenin
adenin TECHNOLOGIES
▪ Building Intranet, Collaboration, Workflow and Portal solutions since 1999
▪...
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...
Copyright © 2015 adenin
Tomorrow’s digital workplaces - Requirements
▪ Must be easily composed with proven, reusable
compo...
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 a...
Copyright © 2015 adenin
Web Components – the future of web development
Plain HTML
Web Component
▪ Less code – the code I
d...
Copyright © 2015 adenin
Web Components – the future of web development
▪ Started by Google in 2013
▪ 2015 collaboration be...
Copyright © 2015 adenin
Web Components – Browser support
▪ Native support in Chrome
▪ Fast JavaScript implementation ("Pol...
Copyright © 2015 adenin
Web Components – the future web development
▪ In large scale production at Google, e.g. Play Music...
Google’s Polymer
Copyright © 2015 adenin
What is Google’s Polymer?
▪ Polymer extends webcomponents and
makes it easier to define custom ele...
Copyright © 2015 adenin
Tangere Elements
▪ Polymer Elements cover common uses
cases
▪ We build a catalog of additional Pol...
Workplace Backend
Copyright © 2015 adenin
Workplace Backend
▪ Polymer runs only in browser, so it requires backend services to become a full...
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 te...
Copyright © 2015 adenin
Questions ?
Copyright © 2015 adenin
Thank you.
martin.amm@adenin.com
www.adenin.com
www.mobilityportal.com
Upcoming SlideShare
Loading in …5
×

Case study - Google's Polymer web components let us develop tomorrow's digital workplaces today

1,693 views

Published on

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.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Case study - Google's Polymer web components let us develop tomorrow's digital workplaces today

  1. 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. 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. 3. Tomorrow's digital workplaces requirements
  4. 4. Digital Workplace - Get all your work done anywhere, anytime
  5. 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. 6. Copyright © 2015 adenin Tomorrow’s digital workplaces - Requirements ▪ Must be easily composed with proven, reusable components
  7. 7. Copyright © 2015 adenin HTML is only for web pages. It cannot be used to build reusable components. ?
  8. 8. Web Components
  9. 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. 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. 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. 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. 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. 14. Google’s Polymer
  15. 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. 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. 17. Workplace Backend
  18. 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. 19. Copyright © 2015 adenin Complete solution: Mobility Portal backend
  20. 20. Project in review
  21. 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. 22. Copyright © 2015 adenin Questions ?
  23. 23. Copyright © 2015 adenin Thank you. martin.amm@adenin.com www.adenin.com www.mobilityportal.com

×