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
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.
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.
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
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.
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
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
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.
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.
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
Later you can add all kinds of extensions to it -
Install Dev tools extension
Just to sum up, why vuejs:
I have some
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.
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.
I’d like to show this example emoji rain component - by Monica Dinculescu from Google Polymer team
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 -
Tag display component, typical when adding new post and such...
Or, another, display textual format of time..
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)
You can customise the bworser APIs that ou were previously building stuff on top of.
So, that was the selling part, now let’s try to look into more technical presepective
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.
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.
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
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.)
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.
Again see how similar to Vue components
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.
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
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