O'Reilly Fluent, Web Components Enterprise

25
v Web Components in Enterprise Applications Ben Donohue, VP Engineering at MediaMath April 2015

Transcript of O'Reilly Fluent, Web Components Enterprise

Page 1: O'Reilly Fluent, Web Components Enterprise

v

Web Components inEnterprise Applications

Ben Donohue, VP Engineering at MediaMathApril 2015

Page 2: O'Reilly Fluent, Web Components Enterprise

@bndo

Page 3: O'Reilly Fluent, Web Components Enterprise

B2B

Page 4: O'Reilly Fluent, Web Components Enterprise
Page 5: O'Reilly Fluent, Web Components Enterprise

THE PROBLEM

Page 6: O'Reilly Fluent, Web Components Enterprise

THE SOLUTION

Page 7: O'Reilly Fluent, Web Components Enterprise

Web Components enable

Stability

Consistency

Velocity

Page 8: O'Reilly Fluent, Web Components Enterprise

Stability

• Encapsulation

• Reusability

https://www.flickr.com/photos/oskay/

Page 9: O'Reilly Fluent, Web Components Enterprise

Consistency

http://giphy.com/gifs/variety-consistency-1bcZDwpb8gdZC

Page 10: O'Reilly Fluent, Web Components Enterprise

Consistency

<mm-dropdown>

Page 11: O'Reilly Fluent, Web Components Enterprise

Velocity

<mm-dropdown>

Page 12: O'Reilly Fluent, Web Components Enterprise

Velocity

At the risk of a faux pas, I'm going to use the @here tag to congratulate/thank the Framework team. William rewrote our segment list rendering using <mm-grid> in about a day (mindblown)

Page 13: O'Reilly Fluent, Web Components Enterprise

REALITY CHECK

Page 14: O'Reilly Fluent, Web Components Enterprise

http://caniuse.com/#search=components

Page 15: O'Reilly Fluent, Web Components Enterprise

Enter Polyfills

https://github.com/webcomponents/webcomponentsjs

Page 16: O'Reilly Fluent, Web Components Enterprise

Our users are relatively homogenous

Desktop only!

Page 17: O'Reilly Fluent, Web Components Enterprise
Page 18: O'Reilly Fluent, Web Components Enterprise

It’s Happening!

Page 19: O'Reilly Fluent, Web Components Enterprise

Users w/o Native WC Browsers

Totally Fine!

Page 20: O'Reilly Fluent, Web Components Enterprise

We do disclaim…

if (nonmodern) {obj.warning = 'T1 performs best in a browser that supports Web

Components. We recommend using Chrome for optimal experience.';}

Page 21: O'Reilly Fluent, Web Components Enterprise

Working with Polymer

https://github.com/Polymer/polymer/issues/629

document.querySelectorAll sluggish on Firefox (v30) for large DOM

Page 22: O'Reilly Fluent, Web Components Enterprise

Developer Happiness

Page 23: O'Reilly Fluent, Web Components Enterprise

https://mediamath.github.io/strand/

Page 24: O'Reilly Fluent, Web Components Enterprise

• WebComponents.org http://webcomponents.org

• WC 101 webcast http://www.oreilly.com/pub/e/3342

• Polymer Project https://www.polymer-project.org

• Strand Lib https://mediamath.github.io/strand

• Google Components https://googlewebcomponents.github.io

• Sid Lee Dashboard http://dashboard.sidlee.com

• Polymer-Ready Chrome

Extensionhttps://github.com/beaufortfrancois/polymer-ready-

chrome-extension

Page 25: O'Reilly Fluent, Web Components Enterprise

@bndo

Thanks!

mediamath.github.io/strand