Pisanie kodu ES6 pod wszystkie przeglądarki

0

Mam napisany skrypt w ES5, który dołączam dynamicznie dodając go do head'a na różnych stronach. Nie mogę na tych stronach dodać żadnego innego kodu, żadnych bibliotek, i oczywiście na każdej stronie mogą być inne skrypty, więc nie wiem gdzie i do czego mam dostęp - a więc cały mój kod nawet musi w czystym JS. I chciałem przepisać go na ES6, a przynajmniej użyć kilku ciekawych rzeczy (np. generatorów).

Niestety, ten kod musi działać pod każdą przeglądarką, i tu jest problem.

Jak to najlepiej rozwiązać?

Czytałem o różnych kompilatorach ES6 do ES5, zapewne da się je zainstalować na serwerze, i przekompilowywać kod JS do zminify'owanego pliku z ES5 za każdym razem, kiedy robię git pulla, i załączać nowy plik na stronach.

Ale to powoduje kilka problemów:

  • nowy kod może być wolniejszy, niż gdybym pisał sam w ES5
  • nie będzie żadnej różnicy w pisaniu w ES6 performane'owo, bo w końcu odpalany będzie kod w ES5, więc nie ma to wszystko za bardzo sensu
0

Pierwsze słyszę, żeby ES6 miał dawać jakiś zysk w wydajności. Może to i prawda, ale jakieś źródła tej informacji? Parę nowych sztuczek ma ułatwić programowanie, a nie zwiększać wydajność.

A tu masz tabelkę wsparcia:
https://kangax.github.io/compat-table/es6

Ja osobiście się wstrzymuję z ES6 dla przeglądarek. Jakbym miał pisać projekt w Node.js to mógłbym wdrażać to, co jest zaimplementowane (czyli niewiele), ale przeglądarki to przecież są upierdliwe z tą ich kompatybilnością, a kompilatory/translatory mnie nie przekonują.

0

No właśnie, niby znalazłem jakieś translatory, np. babel, ale własnie kod wynikowy mógłby być mniej wydajny od tego, który napisze sam. Albo coś może się zjebać i nie będę miał nad tym kontroli. Pytanie czy warto, kosztem tego, używać tych "sztuczek" z ES6.

0

Ale to powoduje kilka problemów:

  • nowy kod może być wolniejszy, niż gdybym pisał sam w ES5

To zależy od tego, z których dokładnie ficzerów korzystasz i w jaki sposób transpilator to przekonwertuje. Niektóre rzeczy są kompilowane ładniej

https://babeljs.io/repl/#?experimental=false&evaluate=true&loose=false&spec=false&code=var%20a%20%3D%20(%7Babc%7D)%20%3D%3E%20abc%20%2B%201%3B%0A%0Avar%20%5Ba%2Cb%5D%20%3D%20%5B10%2C%2020%5D%3B%0A%0Aalert(a)%3B%0A%0Aalert(b)%3B

Taki kod na oko nie powinien być wolniejszy od zwykłego ES5. Z drugiej strony nie każdy ficzer ES6/ES7 jest kompilowany tak elegancko, więc jak człowiekowi zależy na wydajności można zawsze sprawdzić co ci realnie wypluje Babel i czy nie jest to jakiś potworek.

Poza tym nie trzeba się rzucać na każdy nowy ficzer, można korzystać z paru rzeczy.

Np. moim zdaniem fajna jest skrótowa notacja funkcji => chociaż trochę wkurzająca

Fajny jest też destructuring (np. function foo ({text}) { alert(text); } foo({text: 'hello world'}) - samo ci wyłuskuje właściwość text jako zmienną.

Dobre jest też dodatkowy rodzaj deklaracji zmiennych let o zasięgu blokowym (a nie na funkcję jak to jest z var), oraz instrukcja const do deklarowania stałych (albo zmiennych, które będziesz traktować jak stałe).

Poza tym wielkim osiągnieciem ES6 są moduły, które pozwalają na podzielenie projektu na wiele części i importowanie/eksportowanie rzeczy np.:
import React from 'react'
czy
export function foo() {}
wtedy używając np. Babel i Browserify(+Babelify bodajże) możesz mieć kod podzielony na moduły (chociaż podobno Browserify jest już passe, i ludzie używają z Webpacka. Ja natomiast jeszcze w WebPacka nie wszedłem więc piszę o Browserify). To samo można było co prawda robić używając choćby pseudomodułów CommonJS, ale te są lepsze, bo bardziej statyczne (co umożliwia lepszą analizę statyczną kodu).

Nie jestem natomiast jak z kompatybilnością ES6 i NodeJS. Obecnie trochę frajersko jak potrzebuję napisać coś sobie w Node to piszę to na ES5 bo mi nie wchodzi inaczej. (Napisałem frajersko, bo pewnie jakbym ustawił w NVM nowszą wersję Node, albo jakbym transkompilował to również na potrzeby NodeJS to pewnie by mi zadziałało -- ale póki co nie chce mi się tego sprawdzać (robię coś dla siebie akurat teraz, gdzie kod Node jest tylko częścią projektu)).

Podsumując - może nie wszystko, ale ES6 to parę ciekawych ficzerów, z których warto korzystać dla własnej wygody, i przejrzystości kodu. Nie trzeba używać wszystkiego. Poza tym możesz zobaczyć co ci wypluwa transpilator i zadecydować czy z czegoś korzystasz czy nie (o ile faktycznie robisz coś, gdzie potrzebujesz szybkości - bo większość rzeczy, które się pisze w JS nie potrzebują aż takich optymalizacji).

0

Warto, bo zwiększa się czytelność kodu i zmniejsza się jego objętość, a co za tym idzie utrzymanie jest łatwiejsze. W obecnej i poprzedniej firmie pisałem w ES 6 (czy tam ES 2015), co więcej w teamach z USA, z którymi współpracujemy nie rozróżnia się już nawet tego, bo naturalne jest używanie nowych standardów.

Akurat generatorów nie polecam, bo standard jest nadal niestabilny. Nawet ostatnio dekoratory w Babelu krzaczą się, a to akurat świetny feature, którego brakowało od lat w JS-ie. Trudno mi sobie również wyobrazić pisanie JS-a bez np. async/await lub promise'ów - można, ale po co? Pewnie, dało się przez wiele lat żyć bez feature'ów z ES 6, ale to nie znaczy, żeby teraz stać w miejscu, skoro tyle usprawnień doszło.

Przydatny link w kontekście wydajności: https://kpdecker.github.io/six-speed/

A co do kompilacji, to nie rozumiem, co za problem, skoro dobrze skonfigurowane środowisko (np. z użyciem webpacka) automatycznie buduje i odświeża Ci kod w przeglądarce (i to z zachowaniem stanu aplikacji, więc bye bye konieczność logowania się ponownie czy uzupełniania powtórnego pól formularzy). Inna sprawa, że ktoś takie środowisko musi potrafić postawić, a z tym różnie bywa. :x

1 użytkowników online, w tym zalogowanych: 0, gości: 1