Pracy z kątowe 2

głosy
38

Nasz zespół jest zbyt podekscytowani wydaniem alfa kątowej 2 i mamy tylko z niecierpliwością czeka na jego wydanie stabilne i rozpoczęcie pracy z nim. Ale podczas NG-conf 2015 kątowej 2 przez Miśko, natrafiliśmy następujących rzeczy, które złożyły mi mylić

  1. Maszynopis! Jest to naprawdę potrzebne do korzystania maszynopis aby uzyskać lepszą wydajność zamiast pisać zwykły prosty kod JS Robiliśmy wszystko razem. Mamy natknąłem się na kilka uwag, które mówi maszynopis pomaga w lepszej wydajności.

  2. Cechy ES6. Ponieważ kątowa 2 będzie używać wiele funkcji ES6, czy to oznacza, że ​​będziemy musieli czekać na wszystkie przeglądarki obsługują co najmniej te elementy potrzebne kątowej 2, zanim będziemy mogli zacząć kopać z nim na naszych zastosowań produkcyjnych.

  3. Elementy sieci Web. Ponieważ kątowa 2 oferuje funkcje do tworzenia komponentów internetowych i ja natknąłem się na kilku blogach na tworzeniu własnego (przy użyciu polimeru), jak ciężko jest to będzie dla naszego zespołu, aby je utworzyć? A może to lepiej, jeśli po prostu trzymać się starych dyrektyw tworzenia rzeczy?

  4. Wydajność. Widziałem ten film z kątowym + React który zapewnia dobre porównanie kątowe vs kątowej + reagują vs kątowej 2. Ale nie jestem pewien, czy to przypadek, że kątowy 2 jest bardzo szybki na drodze lub czy możemy iść do przodu z budową kątowy + reagują aplikację aby uniknąć oczekiwania na kątowa 2 do stabilizacji lub przeglądarek mieć wsparcie dla funkcji ES6 że kątowe zastosowań.

Nie jestem pewien, mam strukturę moje pytanie dobrze, ale powyżej są moje obawy zanim zacznę naukę kątową 2, ponieważ z ich demonstracji kątowej 2 + maszynopisu wydawało się, że to będzie obejmować wiele zarabiać krzywej dla mnie i mojego zespołu.

Będę bardzo wdzięczny, jeśli ktoś może wyjaśnić na wyżej wymienionych obaw mam.

Dzięki.

Utwórz 14/03/2015 o 13:37
źródło użytkownik
W innych językach...                            


3 odpowiedzi

głosy
38

Maszynopis! Jest to naprawdę potrzebne do korzystania maszynopis aby uzyskać lepszą wydajność zamiast pisać zwykły prosty kod JS Robiliśmy wszystko razem. Mamy natknąłem się na kilka uwag, które mówi maszynopis pomaga w lepszej wydajności.

Maszynopis jest o analizy statycznej dla lepszej typu bezpieczeństwo. Posiada również bardzo ładny zestaw narzędzi edytora (np WebStorm). Nie trzeba go pod kątem wydajności. To jest bardziej narzędziem, które pomaga ci autora. Osobiście jednak, kocham go.

Zacząłem migracji niektóre z moich istniejących bibliotek open-source do maszynopis, bo to o wiele łatwiej pracować. Na przykład, sprawdź zadań Runner przed i po .

Cechy ES6. Ponieważ kątowa 2 będzie używać wiele funkcji ES6, czy to oznacza, że ​​będziemy musieli czekać na wszystkie przeglądarki obsługują co najmniej te elementy potrzebne kątowej 2, zanim będziemy mogli zacząć kopać z nim na naszych zastosowań produkcyjnych.

Wiele cech ES6 można polyfilled. Sprawdź https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills .

Elementy sieci Web. Ponieważ kątowa 2 oferuje funkcje do tworzenia komponentów internetowych i ja natknąłem się na kilku blogach na tworzeniu własnego (przy użyciu polimeru), jak ciężko jest to będzie dla naszego zespołu, aby je utworzyć? A może to lepiej, jeśli po prostu trzymać się starych dyrektyw tworzenia rzeczy?

Elementy sieci Web są również polyfillable (patrz tutaj ). W tym przypadku sugeruję przestrzegać kątowej zespołu w zalecanych praktyk w zakresie tworzenia komponentów. Również może mieć oko na to, co wychodzi z zespołu Polymer w tym zakresie.

Wydajność. Widziałem ten film kątowego + React który zapewnia dobre porównanie kątowe vs kątowej + reagują vs kątowej 2. Ale nie jestem pewien, czy to przypadek, że kątowy 2 jest bardzo szybki na drodze lub czy możemy iść do przodu z budową kątowy + reagują aplikację aby uniknąć oczekiwania na kątowa 2 do stabilizacji lub przeglądarek mieć wsparcie dla funkcji ES6 że kątowe zastosowań.

To brzmi dla mnie jak przedwczesny optymalizacji. Budowanie dla (zwykły) kątowe pierwszy i optymalizować tylko w przypadku zauważenia problemów z wydajnością w poszczególnych częściach aplikacji.

Odpowiedział 14/03/2015 o 13:49
źródło użytkownik

głosy
0

Zauważ, że kątowa 2,0 obiecuje do pracy z Web Components i polimeru, ale na obecnym etapie, tj kątowe 2.0 alfa, to nie działa ( zobacz ). Więc trzeba czekać na jakiś czas chyba.

Odpowiedział 23/03/2015 o 17:55
źródło użytkownik

głosy
18
  1. Maszynopis! Jest to naprawdę potrzebne do korzystania maszynopis aby uzyskać lepszą wydajność zamiast pisać zwykły prosty kod JS Robiliśmy wszystko razem. Mamy natknąłem się na kilka uwag, które mówi maszynopis pomaga w lepszej wydajności.

Maszynopis jest nie wymagane do korzystania Angular2.

Większość przykładów widać użyje JavaScript:

  • classes (ES6)
  • decorators (ES7 / Typescript)
  • types - (Typescript)

Z wyjątkiem, przeglądarki nie obsługują tych funkcji jednocześnie tak wszyscy źródło Angular2 trzeba będzie transpiled do ES5.

Więc w ES5:

  • classes można podrobić poprzez przebiegające prototypów
  • decorators można podrobić za pomocą wrappery
  • types nie są naprawdę konieczne, aby rozpocząć, są one dodawane do cukru synctatic bezpieczeństwa

Byłoby nierealne istniejący użytkownicy dziedziczą ryzyko stosując standardy experimental / krwawienie krawędzi. Jako takie, dokumentacja obejmuje pisanie Angular2 aplikacje w ES5, ES6 / 7 oraz maszynopis.

Bok: Ja osobiście nie wolą używać maszynopis. Traceur może być skonfigurowana do obsługi z rozszerzeniami doświadczalne @decorators i system.js dostarcza polyfill proponowanej ES6-Moduler ładowanej spec.

Oto spojrzenie na dokumentacji Angular2 .

Angular2.io Dokumentacja

  1. Cechy ES6. Ponieważ kątowa 2 będzie używać wiele funkcji ES6, czy to oznacza, że ​​będziemy musieli czekać na wszystkie przeglądarki obsługują co najmniej te elementy potrzebne kątowej 2, zanim będziemy mogli zacząć kopać z nim na naszych zastosowań produkcyjnych.

Jak już powiedziałem, ES6 nie jest jeszcze oficjalnie obsługiwany we wszystkich przeglądarkach. Nawet gdyby tak było, większość witryn będzie nadal wymagają PolyFill celu zapewnienia wstecznej kompatybilności ze starszymi przeglądarkami.

Jedną z ciekawych cech es6-module-loaderjest zdolność do dynamicznie ładować współzależności w locie. Przez czas Angular2 jest z wersji beta, to powinno być łatwe do włączenia tego w swojej aplikacji jako strategii funkcja wykrywania.

  1. Elementy sieci Web. Ponieważ kątowa 2 oferuje funkcje do tworzenia komponentów internetowych i ja natknąłem się na kilku blogach na tworzeniu własnego (przy użyciu polimeru), jak ciężko jest to będzie dla naszego zespołu, aby je utworzyć? A może to lepiej, jeśli po prostu trzymać się starych dyrektyw tworzenia rzeczy?

Nie trudno chociaż może trzeba użyć Angular2 specyficzne komponenty internetowych. Wynika to z faktu, Angular2 jest więcej niż front-end web ram. To może być również używany do izomorficzna (tj Wstępne renderowanie na back-end), rodzimych i aplikacjach mobilnych. Oznacza to, że dotyka bezpośrednio DOM jest wysoce zalecane.

Jeśli chodzi o tworzenie samych elementów ... To nie różni się od tworzenia jakiegokolwiek innego składnika w Angular2. W przeciwieństwie do starego modelu MVC grupowania kod typu (tzn modele, widoki, kontrolery), model komponent zachęca kod grupowania przez kontekst.

Podczas importowania elementem wielokrotnego użytku, powinien pochodzić z wszelkimi dyrektywami, usług itp wymaganych go używać.

Na przykład, patrz Ja stworzyłem. Ponadto do klonowania repo bezpośrednio GH, kod może być zainstalowany i importowane bezpośrednio poprzez JSPM.

Po prostu importto, dodać klasę komponentu do widzenia directivesi każdy <ng2-markdowm>element szablonu będzie po prostu działać. Nie ma się o wiele łatwiejsze niż to.

  1. Wydajność. Widziałem ten film kątowego + React który zapewnia dobre porównanie kątowe vs kątowej + reagują vs kątowej 2. Ale nie jestem pewien, czy to przypadek, że kątowy 2 jest bardzo szybki na drodze lub czy możemy iść do przodu z budową kątowy + reagują aplikację aby uniknąć oczekiwania na kątowa 2 do stabilizacji lub przeglądarek mieć wsparcie dla funkcji ES6 że kątowe zastosowań.

Istnieją 3 główne ulepszenia wydajności wprowadzone w Angular2.

wiązania 1. 2-way danych nie jest domyślnym

Elementy, które wymagają wiązania potrzebę dane mają być wyraźnie oznakowane w szablonie (czyli nie denerwować, nowa składnia sprawia, że ​​to naprawdę proste). W wyniku napowietrznej obowiązek zrobić brudną sprawdzanie na DOM jest drastycznie zmniejszona.

Oznacza to, że nie ma więcej $ zakres, $ scope.apply () i dziwne zasady dotyczące zakresu w znacznikach HTML. Zamiast hierarchia zwyczajem <elements>jest zdefiniowane w komponentach Angular2.

2. Angular2 wykorzystuje wirtualny DOM

jQuery stało się niezwykle proste do bezpośredniego manipulowania DOM. W rezultacie, to także niezwykle łatwe dla niedoświadczonych deweloperów do thrash DOM i układ wyzwalania przepłynie przez częste przyrostowych aktualizacji.

VDOM jest zasadniczo uproszczony w pamięci w Domu. Aktualizacje przyrostowe się stosować bezpośrednio na VDOM który później zostanie zastosowana do rzeczywistej DOM w partii.

Oprócz żądań sieciowych, manipulacje DOM jest największą słabością jest wydajność JavaScriptu. VDOM drugiej strony jest o rząd wielkości szybciej. Zamiast oczekiwać Devs podążać „najlepszych praktyk” ręcznie dozowania aktualizacje DOM, kątowe uchwyty dozowania przejrzysty.

Mniej manipulacje DOM = mniej renderowania UI / Spłaty = dużo bardziej czuły doświadczenie użytkownika.

3. Angular2 działa na pracownika tle

To nie jest dokładnie to nowa koncepcja. Pulpit GUI pracowały w ten sposób od lat, to po prostu nie było technicznie możliwe wprowadzenie HTML5 pracowników tła.

W większości zastosowań stacjonarnych, główny kontekst przebiega synchronicznie + i UI działa asynchronicznie w jego własnym oddzielnym wątku. To sprawia, że ​​doświadczenia użytkownika reagującego niezależnie od tego, co aplikacja robi w głównym kontekście.

+ Uwaga: To niekoniecznie jest prawdą, ale dla jasności.

W przeglądarce, wszystko dzieje się wykonanie w głównym kontekstowego +. Oznacza to, że za każdym razem Javascript musi blokować sprawie operacji procesora ciężki, interfejs użytkownika przestaje odpowiadać użytkownikowi. To nie jest idealne i sprawia, że ​​jest kiepskim / niespójnego doświadczenia użytkownika.

+ Uwaga: W praktyce implementacje przeglądarek różnią się znacznie, ale pozwala zachować rzeczy proste.

Z pracownikami internetowych, to jest możliwe do pchania wszystko oprócz DOM + w kontekście pracowników tła. Idealnie Javascript powinien mieć trochę-or-nie ma wpływu na szybkość reakcji UI.

+ Uwaga: stan DOM nadal musi być dostępny do renderowania.

Jednym efektem ubocznym jest to przejście, architektura Angular2 jest teraz całkowicie oddzielona od UI / DOM. Co oznacza, że ​​teraz można napisać adapterów UI dla innych platform (EX dla iOS, Android, SmartTVs itp), które działają na tym samym kodzie Angular2 natywnie.

Reagować

O ile mogę powiedzieć React wykorzystuje wszystkie te same ulepszenia wydajności kanciastych. Używają VDOM do aktualizacji wsadowych, a wspomniane natywną przenoszenia do innych platform, więc zakładam, że przeszedł samego zmian architektonicznych kanciastych.

Szczerze mówiąc, stosując przetwarzanie w tle, aby zwolnić UI jest tylko kolejnym krokiem w ewolucji do osiągnięcia parytetu z funkcji aplikacji desktopowych.

Angular2 vs React

Zachęcam do obejrzenia filmu ponownie aż do końca. Prezenter wkręca się, gdy pisał kod tak demo na żywo nie był uczciwy porównanie.

Z powiedział, że to nie ma znaczenia, który jest szybszy. Ani będzie znacznie szybciej niż inne, ale oni obaj być znacznie bardziej elastyczne i skalowalne w porównaniu do innych ram UI.


Aktualizacja:

Przepisał sekcję o składnikach internetowych, aby lepiej odpowiedzieć na pytanie.

Odpowiedział 02/11/2015 o 09:04
źródło użytkownik

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more