Vuejs and Web components - current state
Download as PPTX, PDF0 likes692 views
The document discusses Vue.js as a progressive framework for building user interfaces, highlighting its developer-friendly features and interoperability with web components. It outlines the concept of web components, their specifications, and benefits for businesses, such as improved development speed and consistency in user experience. Additionally, it addresses the current state of web components and mentions tools and libraries available for development and testing within this ecosystem.
Vuejs and Web components - current state
- 1. Vue.js and Web Components Mikhail Kuznetcov 2018
- 2. Me? Mikhail Kuznetcov Fullstack engineer at ING Investments @legkoletat github.com/shershen08
- 3. Agenda ● Vue.js ● Web components ○ Overview ○ Usage ○ Benefits
- 4. Vue.js framework progressive framework for building user interfaces
- 5. Vue.js “Vue.js has just right amount of Magic” “Vue.js hits a sweet spot between readability & maintainability and fun” “Personally, I use Angular, hate React and getting to love Vue”
- 8. Start project with Vue.js Install vue- cli $: vue create MyNewProject $: cd MyNewProject && npm run serve Or just try in a browser <script src="https://unpkg.com/vue/dist/vue.js"></script>
- 9. Why Vue.js ● Small footprint ● Great developer experience ○ Syntax ○ Documentation ○ Tooling (typing, cli, plugins, extensions) ● Helps create clear architectures ○ Code splitting and reusing patterns ● Great team, moving fast ○ Typsescript, CLI, ecosystem https://github.com/vuejs/roadmap
- 10. Vue.js modern frameworks are very close to Web components
- 11. Web components Web Components are a set of features currently being added by the W3C to the HTML and DOM specifications that allow for the creation of reusable widgets or components in web documents and web applications.
- 14. … usefull examples https://mxb.at/blog/connection-aware-components/ https://codepen.io/mxbck/pen/JZxyoa?editors=0010 ● Network Information API ● navigator.connection ● React component wrapper <x-network-aware-img> </x-network-aware-img>
- 17. Web components are the new html-tags
- 19. Extending platform, not the framework
- 20. Web components, technical details
- 21. Web components spec Custom Elements Designing and using new DOM elements Shadow DOM Encapsulated style and markup in web components HTML imports Inclusion and reuse of HTML documents in other HTML documents. HTML Template Fragments of markup that go unused at page load, but can be instantiated later on at runtime.
- 22. State of components support 03/2018 https://caniuse.com/#search=components
- 24. Current state (polyfilled) https://github.com/WebComponents/webcomponentsjs Additional load webcomponents-*.js: 11-35 Kb
- 25. Web components implementations ● Polymer 2 and 3 ● X-Tag, SkateJS, Bosonic, Mozilla Brick, etc. ● AMP (https://www.ampproject.org ) ● Ionic (stencil.js, https://stenciljs.com/ )
- 26. Similar api <script type="text/javascript"> export default { name: 'RangeSlider', extends: {}, props: { bar: {}, foo: {}, fooBar: {}, }, data() {}, methods: {}, beforeCreate() {}, mounted() {}, }; </script> Polymer X-tags Vue.js
- 28. Components hide complexity A facade is an object that provides a simplified interface to a larger body of code, such as a class library. A facade can: ● make a software library easier to use, understand, and test, since the facade has convenient methods for common tasks ● make the library more readable, for the same reason ● reduce dependencies of outside code on the inner workings of a library, since most code uses the facade, thus allowing more flexibility in developing the system ● wrap a, subjectively, poorly-designed collection of APIs with a single well-designed API https://en.wikipedia.org/
- 29. Benefits for business ● Development speed & testability ● Onboarding ● Single source of truth ● Unify distribution ● Own UI toolkit => consistent UX across paltforms ● Pluggable kits of components (Vaadin, Vuetify etc.) ● Performance (due to native support) List includes: EA, Atlassian, ING, Bloomberg, Google’s projects etc.
- 30. Web components in ING ● Started 2016 ● +400 components & apps in Polymer and native WCs ● +20 teams ● Custom pipeline, styleguides, knowledge sharing, and bestpractices
- 31. Web component developer toolbox Testing wct - https://github.com/Polymer/.../web-component-tester Storybook - https://storybook.js.org/examples/ Bundling Polymer bundler - https://github.com/Polymer/tools/tree/master/packages/bundler Webpack’s web-components-loader (?) Libraries Open - https://www.webcomponents.org/ Proprietary, like https://vaadin.com/components
- 32. <hello-world> https://glitch.com/edit/#!/simple-custom-element?path=views/index.html:1:0 Use sebsequent blocks: <template>, <style>, Class
- 33. Web components make life easier different
- 34. Attention points Creators ● Testing ● Write good code Consumers: ● Bundle size ● Stying ● Ecosystems combining ● Security
- 35. Recap ● Modern frameworks (e.g. Vue) already provide developer experience close to expected when having fully supported Web components; They are already interopreable; ● Using WCs enables encasulated unified experience; ● Adopting WCs solves lots of problems but also uncovers new challenges.
- 36. Questions @legkoletat Presentation will be available here soon
Editor's Notes
- #3: A quick word about myself - I am Mikhail, I Who’s watching footbal last weeks ? Oh yes, Inknow Netherland is not there… I workd as … I also do stuff with vue and other modern APIs
- #4: What is WC What WC features are now in Vue What’s missing and how may be covered ------ Just to estimate how much we should spend time on some parts - Whos is using Vur for main projects? Who’s on React? Angular? OK, fine, so we can skip the part with how to make it work
- #6: Was started in 2014 by Evan, former googler who inherited a lot of good ideas from Ajs and React that were growing very popular those days. Essentially - V is defined as a progressive framework for building user interfaces. Vue is designed from the ground up to be incrementally adoptable. So you can rewrite a piece of your app to give it a try. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects - Network layer SSR State management UI pugins (wrapers for 3rd party) I first came accross V around 2 yeares ago, at that moment it was still moving on version 1.x Later last winter I was doing a presentation ab how to give V a try if you are Angular developer and at that moment not many ppl were aware about it. But then things started moving really fast. And we like new libraries, right? ======= On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
- #7: In Conclusion: React Still Dominates, Vue Growing Fastest That said, Vue fans have no reason to be sad. Over the last 2 years, Vue has grown at a faster percentage rate than any of the other dominant JavaScript frameworks, recently catching up to Angular.js and gradually narrowing the gap between it and both Angular and React.
- #8: prebuilt data binding and MVC model Effortlessly ship native ES2015 code for modern browsers, or build your vue components as native web components. Vue CLI is fully configurable without the need for ejecting Out-of-the-box support for Babel, TypeScript, ESLint, PostCSS, PWA, Unit Testing & End-to-end Testing
- #9: Later you can add all kinds of extensions to it - Install Dev tools extension
- #10: Just to sum up, why vuejs: I have some
- #11: Normal People usually can’t follow more than 5-7 objects at once, When you trying to keep an eye on more - you start making mistakes, start forgetting things etc. Normally when you're trying to follow more than 5 things you start making mistakes you start being …. So where are developers were people and we also lazy! so we tried to know keep things simple right that's how a lot of beautiful tools in CS being built. REact - ONLY VIEW LAYER, CURL, TOP, etc. Same principle applies here - separate and rule. We developers are lazy. Archirecture so what supposed to help us to keep things clear keep things simple is the Architecture Oh, I love those all those patterns concerns, scheme as you know can go for so if you talk about the components of web components they are implementing the FACADE PATTERN.
- #12: Having this overvie of the Vue, framework Previously in that presentation I was diving into comparing part Vue v WC I think wen are moving History Was referenced before, but since around beginning of 2011 and also currently, the term “Web Components” has been used to refer to the new W3C standards. Web Components are developer defined HTML Elements which work in the browser with other HTML elements like <p>, <main> or <body>. By designing our own new elements we can bring new powers to HTML to accomplish tasks previously only managed with JavaScript.
- #13: I’d like to show this example emoji rain component - by Monica Dinculescu from Google Polymer team
- #15: Just couple days ago I came accross component writtent by Max Böck - Over the last decade, we have learned to embrace the uncertainty of developing for the web. In this particular example offline: a placeholder with alt text 2g / reduced data mode: a low-resolution image, ~30kb 3g: a high resolution retina image, ~200kb 4g: a HD video ~1.8MB By combining the Network Information API with React, we could write a component that renders different elements for different speeds Cool right? I have couple more daily used examples for you of course -
- #16: Tag display component, typical when adding new post and such...
- #17: Or, another, display textual format of time..
- #18: You basically got the idea - Same as you were adding plugins to you frameworkd or CMS of choise - But now - you are extending natively supportted (with an asterisk here, we’ll talk about it later)
- #20: You can customise the bworser APIs that ou were previously building stuff on top of.
- #21: So, that was the selling part, now let’s try to look into more technical presepective
- #22: It has taken a long time to get here but things are moving in the correct direction with Safari shipping Shadow DOM and now landing support for Custom Elements. --------------- Web Components can be used in multiple applications and provide interoperability between frameworks making them reusable and modular. In fact, the entire component’s markup can be placed inside a template which follows the separation of concerns principle, thus minimizing tight coupling and increasing maintainability of code. Web Components also prevent inheritance and naming conflicts by separating the component from the rest of the DOM (Document Object Model), also known as encapsulation. This is enabled through the Shadow DOM which provides a private scope rathe --------------- These specifications are the building blocks of what makes up Web Components. It is clear that developers are constantly looking to add structure and efficiency when designing web applications, which is where modular-based design comes in. Modularity is an important design principle, well known in the back-end programming world for some time. The ISO/IEC/IEEE define modularity as “The degree to which a system or computer program is composed of discrete components such that a change to one component has minimal impact on other components”. The general goal of modularity is that the modules are extensible, reusable and maintainable [6]. These principles bring many advantages not only to back-end programming but to the front-end as well.
- #24: And now real TODAY’s summer 2018 As you can see guys are working hard on it, see several impressive improvements: YEY - Samsung Internet is 100% compartible , YOU CAN REMOVE YOUR CHROME NOW To me this starts looking as a totally Goggle’s project.
- #26: See: stencil.js, Heavily inspired by VueJS. (Same VDOM engine, template syntax) Web Components ARE tools for flexible, full-featured front-end There is no formal distinction between a simple component and an “application” Ive added this, because in all V/A/R - you either have official support libs or it’s coming soon as a part of the process
- #30: Advantages of Web Components for Controlling Complex APIs establish a common UI language Basically you want something to rewrite all you outdated stuf again Being able to work with the DOM API directly and browsers’ built-in development tools comes with distinct advantages, and helps replace the cognitive load of framework specifics with standardized techniques and tooling (HTML element attributes/properties, encapsulated styling via CSS, etc.)
- #32: Web pages that use multiple HTML Imports, external scripts, and stylesheets to load dependencies may end up making lots of network round-trips. - ----- polymer-bundler is a library for packaging project assets for production to minimize network round-trips. Relationship to Polymer CLI The Polymer CLI uses polymer-build, which uses polymer-bundler, so you can think of the CLI's build pre-configured polymer-build pipeline including polymer-bundler. Setting this up for you makes the CLI easy to use, but as a command-line wrapper its customization options are more limited. polymer-bundler allows you to completely customize your bundle strategy.
- #33: Again see how similar to Vue components
- #34: Normal People usually can’t follow more than 5-7 objects at once, When you trying to keep an eye on more - you start making mistakes, start forgetting things etc. Normally when you're trying to follow more than 5 things you start making mistakes you start being …. So where are developers were people and we also lazy! so we tried to know keep things simple right that's how a lot of beautiful tools in CS being built. REact - ONLY VIEW LAYER, CURL, TOP, etc. Same principle applies here - separate and rule. We developers are lazy. Archirecture so what supposed to help us to keep things clear keep things simple is the Architecture Oh, I love those all those patterns concerns, scheme as you know can go for so if you talk about the components of web components they are implementing the FACADE PATTERN.
- #35: how to access Shadow DOM BUndle size - because some things gate writtent multiple times and you can’t avoid it Security - ever checked all 300Mb your node modules folder ? what about bower components ? Hard to write good code - web/UI not much diff from any other CS dev: its about making api as sharp and simple as you can , hide as much as possible , do not to unexpected defaults and expectations <polymer-*>, <amp-*> - From the outside it looks like there is a massive platform play to get people locked into the framework’s element set and the name-spacing like we are seeing puts developers in the position of buying into the stack and even if it is unintentional they are creating a walled garden that could lock the developers into one platform. One of my concerns is that there is a lot of rich functionality getting created that we can drop in and use on our page, but a lot of it is getting duplicate developers in control and not go down into a world where you are locked into a platform just because you want a nice element in your page
- #36: Vue.js is almost Web Components ---------------------------- Vue made a great bid on going the same direction --- Vue dev experience and end results is close to that expected when having fully supported WC Coming improvements (Vue, browsers, WC stack) make Vue ecosystem a safe bid for a project that may later migrate/heavily use WC Era of framework divergence coming to an end