Perspektywa... ma znaczenie :)

/What-is-the-future-of-jQuery-for-2017-and-later

HTML-first JS-first

Gwiazdki na ?

Prehistoria, starożytność

2011
v1.0.0
2012
OSS
2013

Średniowiecze, nowożytność

start
BSD
IE8
2014
2.0.0-alpha.13
Native
2015
v2.0.0
v2.0.0
2016

Nowoczesność

MIT
2017
v3???
v7.0.0
Hooks
2018
Kto? Google Facebook gość po Google'u
Uwagi Zmiana filozofii (2-way vs. 1-way binding) Promowanie 1-way bindingu, zmiana licencji Lepszy Angular przed lepszym Angularem (2+)
Slogan One framework. Mobile & desktop. A JavaScript library for building user interfaces The Progressive JavaScript Framework
kB? ~140 ~40 ~20
npm/tydz. ~1.5M ~3M ~0.5M
Hejter Następny Ember Mieszałem HTML z PHP i to była "zła praktyka" Tyle gwiazdek i brak ofert pracy?
Fanboj Ma już wszystko podpięte Facebook, musi być świetne Lekkie, szybkie, pełne możliwości
Tak serio Framework "enterprise" Pewniak Uwielbiane, ale raczej nieużywane w pracy
hasvuepassedreactyet.surge.sh

Mój wybór?

(nowy projekt)

  1. Czysty JS (Web Components)
  2. Zależnie od humoru
    • JS-first?
    • HTML-first?

Web Cmponents

  1. Custom Elements
  2. HTML templates
  3. Shadow DOM
  4. HTML Imports

Custom Elements - tworzenie własnych znaczników 


                        customElements.define('demo-time', class extends HTMLElement {
                          constructor() {
                            super();
                            this.innerHTML = `
                              

                                DEMO TIME!
                                

                                check thizzz
                              

                            `;
                          }
                        });

HTML templates - tworzenie HTML-a 


                        const template = document.getElementById('h4-template');
                        const node = template.content.cloneNode(true);

                        document.getElementById('this-slide').appendChild(node);

Shadow DOM - ukrywanie "implementacji" 


                        customElements.define('full-webc', class extends HTMLElement {
                          constructor() {
                            super();
                            const template = document.getElementById('h4-template');
                            const content = template.content.cloneNode(true);
                            this.attachShadow({mode: 'closed'}).appendChild(content);
                          }
                        });

Przyszłość

2018 in review and ’s predictions for 2019

  • TypeScript
  • GraphQL

A sam ?

  1. Web
    • 97% of the code in a modern web application comes from npm
    • Np. package locking by default
  2. Bezpieczeństwo
    • Node Security Platform
    • Np. security audits

tink

Bezpieczeństwo?

Problematyczna zależność? left-pad

Trendy

  • Uproszczenia!
    • (v7) rozumie a
    • / =>
    • #0cjs
    • CLI
  • Micro-frameworki ~
  • Server-side rendering
mat3e.github.io/talks/fe-overview/j-labs.html
Moje kursy na

JavaScript i front-endy (2018): Poważny, rozwinięty i zaawansowany ekosystem