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.

Your Future HTML: The Evolution of Site Design with Web Components

66,998 views

Published on

This talk is dedicated to helping you understand how you can easily build reusable pieces of user interface while assembling your overall experience. Specifically the emerging technology of web components is introduced as the way you can package your HTML, CSS, and JavaScript to produce drop-in solutions. It’s like building UI elements and widget controls for the web.

By using this tactic to architect your sites you’ll reduce time, and increase quality, of the work your development team produces. See how designers and developers will use the deep functionality web components offer. Make custom HTML tags backed by the necessary markup, style, and code. This unique bundle mixes presentation with behavior creating rich and flexible micro-interactions.

I’ll review how the popular browser makers are implementing this emerging technology on desktop and mobile. I’ll introduce Google’s Polymer library as a way you can use web components now while platform owners are in the process of supporting the proposed standard.

Published in: Engineering, Design, Technology
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: www.bit.ly/sexinarea
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • We called it "operation mind control" - as we discovered a simple mind game that makes a girl become obsessed with you. (Aand it works even if you're not her type or she's already dating someone else) Here's how we figured it out... ➤➤ http://t.cn/AijLRbnO
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: www.bit.ly/2AJerkH
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • How can I improve my memory book? How can I improve my memory recall? visit to learn...◆◆◆ https://bit.ly/2GEWG9T
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Your Future HTML: The Evolution of Site Design with Web Components

  1. <your-future-html> The Evolution of Site Design with Web Components Ken Tabor, @KenTabor
  2. Ken Tabor, @KenTabor bit.ly/KenBigDesign2015
  3. What’s a Web Component?
  4. Presentation + Behavior
  5. Not One Off
  6. Drop In
  7. Code Solutions are investments in your business
  8. Encapsulation High Cohesion Loose Coupling Single Responsibility Interface API Composition #coderlife
  9. In other words
  10. You get to make your own HTML tags
  11. Polymer helps make web components now
  12. Google Built
  13. Not a framework, but a library
  14. Interoperates (plays nicely with others)
  15. v0.5 “R&D” v0.8 “Alpha” v1.0 “Prod” v1.1 “Prod” Ken Discovers Polymer Jul 2014 March 2015 May 2015 August 2015
  16. Polymer is a polyfill emulating Web Components on all modern browsers
  17. It’s also a “sweetened” opinion on top … aka Syntactic Sugar
  18. Kinda like jQuery sits on top of plain JavaScript DOM access
  19. $('#btn-accept'); vs document.querySelector( '#btn-accept');
  20. Syntactic Sugar is developer friendly
  21. Automatic node finding Component lifecycle Two-way data binding Utility functions
  22. … but we can’t really know what’s going on under the hood with sugar
  23. It’s Demo Time {{cool-button R&D}}
  24. github.com/KDawg/ YourFutureHTML
  25. <cool-button id=“btn-accept" size="large" bodyColor="alazarian" quantity="42"
 product="Life, the Universe, and Everything" label="Press Me!"> </cool-button>
  26. What’s a Web Component?
  27. W3C Standard
  28. “Almost”
  29. What’s a Web Component?
  30. It’s an emerging standard consisting of 4 standards
  31. Custom Elements
  32. Custom Elements HTML Imports
  33. Custom Elements HTML Imports Shadow DOM
  34. Custom Elements HTML Imports Shadow DOM Templates
  35. Custom Elements HTML Imports Shadow DOM Templates Web Component
  36. We need something like this for our sanity
  37. DOM => Document Object Model
  38. HTML => HyperText Markup Language
  39. CSS => Cascading Style Sheet
  40. What is this describing?
  41. An Essay? 😰
  42. Yet, we’re building highly interactive, continuously delivered apps, across multiple operating systems, and hardware platforms
  43. BLARG! 😱
  44. This isn’t getting any easier
  45. Around 2011 we started using HTML5 tags www.google.com/trends/explore#q=html5
  46. Oct 28, 2014 the proposal was recommended (done) en.wikipedia.org/wiki/HTML5
  47. <nav> <footer> <video> <canvas> <section>
  48. <div class=“wtf” id=“hth”/>
  49. Is HTML done?
  50. Am I done with HTML?
  51. Will we finally rid ourselves of the noisy multitude of JavaScript MVC frameworks that plague our decision making?
  52. Prototype Dojo Toolkit YUI Ext Angular Knockout Backbone Ember React 2005 2005 2006 2007 2009 2010 2010 2011 2013 Source: https://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
  53. Will we finally rid ourselves of the noisy multitude of JavaScript MVC frameworks that plague our decision making??
  54. Maybe
  55. I choose to believe in the future of Web Components
  56. It’s Demo Time {{tv-listing R&D}}
  57. github.com/KDawg/ YourFutureHTML
  58. <tv-listing id="the-list"></tv-listing>
  59. What’s up with this guy? Who is Ken Tabor?
  60. I’m a product engineer at Sabre building TripCase
  61. What’s a Web Component?
  62. It’s an entry into your world
  63. APIs
  64. Design Aesthetic
  65. Datasets
  66. Why jQuery?
  67. jQuery because? DOM element selection $('thing') $('#thing') $('.thing')
  68. But JavaScript! getElementsByTagName() getElementById() getElementsByClassName() querySelector()
  69. jQuery because? It makes AJAX easy $.ajax()
  70. But JavaScript! XMLHttpRequest()
  71. jQuery Because? Widget plugin standard
  72. But Web Components!
  73. Why jQuery? YouMightNotNeedJQuery.com!
  74. Considerations
  75. jQuery It’s feeling obsolete, does it help your future?
  76. ReactJS Overlapping goals with Web Components, but it’s not a standard
  77. IE7/IE8/IE9 Ancient tech and doesn’t support Polymer or Web Components (or anything good in life)
  78. Polymer It delivers Web Components, but it’s also an opinionated layer
  79. @polymer @rob_dodson @ebidel polymer-project.org webcomponents.org x-tags.org customelements.io Learn More @addyosmani @wilsonpage @Web_Components
  80. Browser Platform Updates chromestatus.com/features status.modern.ie webkit.org/status.html
  81. Web Components enable the reality of a common visual design language that’s alive
  82. Drop In UI
  83. Share your answers: with yourself, your team, your company, your community
  84. Establish an internal open source project collecting all of your UI widgets
  85. Crowd-source your way to the awesome
  86. Features Bug fixes Optimizations
  87. You don’t need Web Components to do this - have success now
  88. Build the UI so you can get to the UX
  89. Learn Solve Interesting Problems Share #innovation #JFDI
  90. It’s Your Turn to Respond
  91. Look for my book bit.ly/KenBigDesign2015 @KenTabor blog.katworksgames.com

×