Perspektywa... ma znaczenie :)

bestofjs.org/projects?tags=framework&sort=yearly

progressss

46%

adopcji TS-a 

					import React from 'react';
					import ReactDOM from 'react-dom';

					const Counter = ({initial}) => {
					  const [count, setCount] = React.useState(initial);
					  return (
					    <div className="centered">
					      <button onClick={() => setCount(count - 1)}>
					    	-
					      </button>
					      <span>{count}</span>
					      <button onClick={() => setCount(count + 1)}>
					        +
					      </button>
					    </div>
					  );
					}

					ReactDOM.render(
					  <Counter initial={10} />,  
					  document.getElementById('react-app')
					);
#react-app 

					import 'zone.js'; import 'core-js/es/reflect'; import 'core-js/features/reflect';
					import { BrowserModule } from '@angular/platform-browser';
					import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
					import { NgModule, Component, Input } from '@angular/core';

					@Component({
					  selector: 'angular-counter',
					  template: `
					    <div class="centered">
					      <button (click)="setCount(count - 1)">
					        -
					      </button>
					      <span>{{count}}</span>
					      <button (click)="setCount(count + 1)">
					        +
					      </button>
					    </div>
					  `
					})
					class Counter {
					  @Input() count: number;

					  setCount(count: number) {
					    this.count = count;
					  }
					}

					@Component({ selector: 'angular-app', template: '<angular-counter [count]="10">' }) class App { }

					@NgModule({
					  imports: [ BrowserModule ],
					  declarations: [ App, Counter ],
					  bootstrap: [ App ]
					})
					class AppModule { }

					platformBrowserDynamic().bootstrapModule(AppModule);
<angular-app> 

					import Vue from 'vue';

					const Counter = Vue.component('vue-counter', {
					  props: { initial: Number },
					  data: function() {
					    return {
					      count: this.initial
					    }
					  },
					  template: `
					    <div class="centered">
					      <button @click="--count">
					        -
					      </button>
					      <span>{{count}}</span>
					      <button @click="++count">
					        +
					      </button>
					    </div>
					  `
					});

					new Vue({
					  el: '#vue-app',
					  components: { Counter },
					  template: '<vue-counter :initial="10" />'
					})
#vue-app

Co brać? "Pewniak"?

PRZED PO
react-use

Po prostu fajniejsze API?

Co ja bym wybrał?

  1. Vanilla JS (Web Components)

Web Components 


                        class FullWebComp extends HTMLElement {
                            constructor() {
                                super();
                                this.attachShadow({mode: 'closed'})
                .appendChild(document
                                                      .getElementById('h2-template')
                                                      .content
                                                      .cloneNode(true));
                            }
                        }
                        
                        customElements.define('full-web-comp', FullWebComp);

👀

CanIUse?

kiedyś teraz

97%

kodu nowoczesnych aplikacji pochodzi z npm

MILION

średnio ~800 dziennie

Micro-frameworki

left-pad w 2016?

07.11 - npm fund

95%

kodu to front przy podejściu serverless

Front-end for the win?

Dziękuję