SlideShare a Scribd company logo
Web Components,
Polymer, and
HAX
#haxtheweb #apereo18
Bryan
Ollendyke
@btopro / btopro@psu.edu
Penn State, College of Arts & Architecture
Headless
Authoring
eXperience
What is Authoring
Experience?
Instructors & staff
are users, too!
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Why can’t all authoring play nice together?
6 7 8
Headless
Authoring
eXperience!
What is HAX?
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
HAXtheweb.org
play now
How did we get headless?
So these right?
We don’t need a framework!
the web is the platform!!!
Wait, what is “the platform”?!
The web is the platform!
webcomponents.org
Why web components?
Design / component Uniformity
<div style=“color:blue;”>
<a href=“link.com”>Name</a>
</div>
<my-button link=“link.com”>
Name
</my-button>
Sustainability
Sustaina-whaaaaa?
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Accessibility
Some Section header
Second Line
So what about DX?
Why does Drupal care about my Design.
I don’t know drupal and I’m not able to contribute
as a result of that.
Michael Collins, Feb 2017
“ “
Why does Drupal care about my Design.
I don’t know {your system here} and I’m not able
to contribute as a result of that.
Michael Collins, Feb 2017
“ “
The system will learn your Design.
The Design will not learn your system.
btopro, right now
“ “
Why Polymer?
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
U-VASE
Understanding
Via
A
Silly
Example
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
Apereo 2018 - Webcomponents and building a unified authoring experience for any project
bower install --save LRNWebComponents/hax-body
bower install --save LRNWebComponents/hax-body
SIMULTANEOUS Cross project dev!!!!!!!!
6 7 8
Let’s work together
No matter what system we
choose!
@btopro
#haxtheweb
@elmsln

More Related Content

PPTX
HAXTHEWEB - Drupal 4 Gov webinar
PDF
Better. Faster. UXier. — AToMIC Design
PPTX
To the Pattern Lab! Better Collaboration in Drupal Using Atomic Design Princi...
PDF
The Ideas of Clojure - Things I learn from Clojure
PDF
Understand front end developer
PDF
Style Guides, Pattern Libraries, Design Systems and other amenities.
PPT
Web2 Week1 PPT
PDF
Minghao Zhu Resume
HAXTHEWEB - Drupal 4 Gov webinar
Better. Faster. UXier. — AToMIC Design
To the Pattern Lab! Better Collaboration in Drupal Using Atomic Design Princi...
The Ideas of Clojure - Things I learn from Clojure
Understand front end developer
Style Guides, Pattern Libraries, Design Systems and other amenities.
Web2 Week1 PPT
Minghao Zhu Resume

What's hot (11)

PPTX
Mahara UK 13 : Let's talk about themes and usability
KEY
corporateJavascript
KEY
Charts, PDFs, and PHP
PDF
Good, bad, web.
PPTX
The Extensible Web
PPT
V I R T U A L C O M M U N I C A T I O N
PPTX
How to Win Friends and Influence Standards Bodies
PDF
DjangoCon09: No! Bad Pony!
PPT
How to do b tech be projects or any academic projects
PPTX
The portable desktop
PPTX
Blog feedback
Mahara UK 13 : Let's talk about themes and usability
corporateJavascript
Charts, PDFs, and PHP
Good, bad, web.
The Extensible Web
V I R T U A L C O M M U N I C A T I O N
How to Win Friends and Influence Standards Bodies
DjangoCon09: No! Bad Pony!
How to do b tech be projects or any academic projects
The portable desktop
Blog feedback
Ad

Similar to Apereo 2018 - Webcomponents and building a unified authoring experience for any project (20)

PPTX
Bootstrap for Beginners
PDF
Web Development for UX Designers
PDF
UX, Front-end and Back-end: How front-end can help these guys?
PDF
Vaadin Introduction at OOP 2014
PPTX
CSS Eye for the Programmer Guy
PDF
1. Let's study web-development
PDF
Using Cool New Frameworks in (Mobile) Domino Apps
PPT
Web 2.0 for IA's
PPTX
Build a better(reactive) word press
PPT
CSS3 and a brief introduction to Google Maps API v3
PPTX
UI Web Development.pptx
PDF
Web Fundamentals Crash Course
PDF
Web Fundamentals Crash Course
PDF
10 Simple Rules for Making My Site Accessible
ODP
Worry free web development
PDF
Going native with html5 web components
PDF
Teams, styles and scalable applications
PDF
Introduction to-web-application-development-with-vaadin7
PDF
No Feature Solutions with SharePoint
PDF
AcceDe Web, a Guide for Accessibility Web Projects, OW2con'16, Paris.
 
Bootstrap for Beginners
Web Development for UX Designers
UX, Front-end and Back-end: How front-end can help these guys?
Vaadin Introduction at OOP 2014
CSS Eye for the Programmer Guy
1. Let's study web-development
Using Cool New Frameworks in (Mobile) Domino Apps
Web 2.0 for IA's
Build a better(reactive) word press
CSS3 and a brief introduction to Google Maps API v3
UI Web Development.pptx
Web Fundamentals Crash Course
Web Fundamentals Crash Course
10 Simple Rules for Making My Site Accessible
Worry free web development
Going native with html5 web components
Teams, styles and scalable applications
Introduction to-web-application-development-with-vaadin7
No Feature Solutions with SharePoint
AcceDe Web, a Guide for Accessibility Web Projects, OW2con'16, Paris.
 
Ad

More from Bryan Ollendyke (20)

PPTX
Lecture 14 - OER final project
PDF
Lecture 12 - Docker
PDF
Lecture 11 - Web components
PPTX
EdTechJoker Spring 2020 - Lecture 10 HAXTheWeb
PPTX
EdTechJoker Spring 2020 - Lecture 8 Drupal again
PPTX
EdTechJoker Spring 2020 - Lecture 7 Drupal intro
PPTX
EdTechJoker Spring 2020 - Lecture 6 - WordPress
PPTX
EdTechJoker Spring 2020 - Lecture 5 grav cms
PPTX
EdTechJoker Spring 2020 - Lecture 4 - HTML
PPTX
EdTechJoker Spring 2020 - Lecture 2 - Git
PPTX
EdTechJoker Spring 2020 - Lecture 1 - Welcome
PPTX
Apereo 2018 - NGDLE, OER, Cost reduction, accessibility and decentralization
PPTX
Apereo 2018 - HAX lightning talk
PPTX
Apereo 2018 - NGDLE efforts
PPTX
Apereo 2018 - Polymer training
PPTX
Building and Envisioning a Next Generation Digital Learning Environment
PPTX
History of the web as a platform from 1996 to 2017
PPTX
NGDLE (2016 version)
PPTX
Rethinking system design
PPTX
Drupal Govcon 2017 Polymer workshop slides
Lecture 14 - OER final project
Lecture 12 - Docker
Lecture 11 - Web components
EdTechJoker Spring 2020 - Lecture 10 HAXTheWeb
EdTechJoker Spring 2020 - Lecture 8 Drupal again
EdTechJoker Spring 2020 - Lecture 7 Drupal intro
EdTechJoker Spring 2020 - Lecture 6 - WordPress
EdTechJoker Spring 2020 - Lecture 5 grav cms
EdTechJoker Spring 2020 - Lecture 4 - HTML
EdTechJoker Spring 2020 - Lecture 2 - Git
EdTechJoker Spring 2020 - Lecture 1 - Welcome
Apereo 2018 - NGDLE, OER, Cost reduction, accessibility and decentralization
Apereo 2018 - HAX lightning talk
Apereo 2018 - NGDLE efforts
Apereo 2018 - Polymer training
Building and Envisioning a Next Generation Digital Learning Environment
History of the web as a platform from 1996 to 2017
NGDLE (2016 version)
Rethinking system design
Drupal Govcon 2017 Polymer workshop slides

Recently uploaded (20)

PDF
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
PDF
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
PDF
O7-L3 Supply Chain Operations - ICLT Program
PDF
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
PPTX
IMMUNITY IMMUNITY refers to protection against infection, and the immune syst...
PDF
Insiders guide to clinical Medicine.pdf
PPTX
GDM (1) (1).pptx small presentation for students
PDF
Computing-Curriculum for Schools in Ghana
PDF
Black Hat USA 2025 - Micro ICS Summit - ICS/OT Threat Landscape
PPTX
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
PDF
O5-L3 Freight Transport Ops (International) V1.pdf
PDF
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student
PPTX
Institutional Correction lecture only . . .
PPTX
human mycosis Human fungal infections are called human mycosis..pptx
PDF
Basic Mud Logging Guide for educational purpose
PPTX
Lesson notes of climatology university.
PDF
VCE English Exam - Section C Student Revision Booklet
PDF
STATICS OF THE RIGID BODIES Hibbelers.pdf
PDF
Pre independence Education in Inndia.pdf
PDF
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
O7-L3 Supply Chain Operations - ICLT Program
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
IMMUNITY IMMUNITY refers to protection against infection, and the immune syst...
Insiders guide to clinical Medicine.pdf
GDM (1) (1).pptx small presentation for students
Computing-Curriculum for Schools in Ghana
Black Hat USA 2025 - Micro ICS Summit - ICS/OT Threat Landscape
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
O5-L3 Freight Transport Ops (International) V1.pdf
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student
Institutional Correction lecture only . . .
human mycosis Human fungal infections are called human mycosis..pptx
Basic Mud Logging Guide for educational purpose
Lesson notes of climatology university.
VCE English Exam - Section C Student Revision Booklet
STATICS OF THE RIGID BODIES Hibbelers.pdf
Pre independence Education in Inndia.pdf
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf

Apereo 2018 - Webcomponents and building a unified authoring experience for any project

Editor's Notes

  • #30: Atomic / Uniform / Pattern Library
  • #33: Polymer/Skate/Xtag/Vanilla JS and used in Drupal, WP, Vue, Angular & React
  • #34: Polymer/Skate/Xtag/Vanilla JS and used in Drupal, WP, Vue, Angular & React
  • #37: Semantic HTML
  • #60: In 1 year, 6 months of just Bryan and Potter.