Ъглова 2.0 срещу полимерна

Здравейте, момчета! Преди да започна да сравнявам тези две рамки / библиотеки на JavaScript, важно е да разбера как се променя начинът на уеб разработка и как новите рамки се опитват да улеснят тази промяна.

Новият начин на уеб разработка

елементи

  • Модулният дизайн и разработка са популярни принципи сред разработчиците. В света на уеб разработката разработката, базирана на компоненти, се е развила на принципа на модулността.
  • Модулният код е лесен за поддръжка и повторна употреба. По-малка е вероятността за грешки поради по-малката, изолирана и по-тествана кодова база.
  • Рамки като Angular, Ember, React, Backbone и други са предоставили свои собствени решения за компонентнизация в мрежата.

Уеб компоненти

  • Web Components са представили концепцията за компонентите на браузърите. Въпреки че все още можем да използваме компонентните решения, предоставени от рамки, родните уеб компоненти носят степен на повторна употреба, която другите рамки не могат да постигнат.
  • Web Components капсулират модули от функционалност в най-основната единица на HTML, DOM елемент. С напредъка, постигнат в Web Components, те се превърнаха в пътя за модулен код в мрежата.
  • Спецификациите на уеб компонента все още не са напълно приложени от всички браузъри. Но доставчиците на браузъри активно имплементират различните части на спецификацията, което означава, че поддръжката за уеб компоненти само ще се подобри.

Мостът към уеб компоненти

Ъглова 2.0

  • Angular е една от най-популярните рамки на JavaScript сред разработчиците. Последната версия на Angular (Angular 2) също работи върху концепцията за компоненти.
  • Angular 2 е пълноценна рамка на JavaScript, която не само ви позволява да изграждате компонентите, но и помага в управлението на различни аспекти на уеб приложения като маршрутизация и обработка на състоянието.
  • Ъгъл 2 също може да бъде конфигуриран за генериране на уеб компоненти.

полимер

  • Полимерната библиотека е лек захарен слой върху API на Web Components. Полимерът е библиотека, която ни помага да използваме пълния потенциал на уеб компонентите.
  • За разлика от типичната javascript рамка, Polymer е създаден да използва функции, изпечени в самата уеб платформа, за да ви позволи да изграждате компоненти.
  • #UseThePlatform е името, което Polymer дава, за да представи желанието на браузъра да направи цялото повдигане без библиотеки.

Как ги сравняват

Размер:

Размерът на уеб приложението има пряко влияние върху работата на времето за зареждане. Освен кода и активите на приложението, външните рамки и библиотеките също добавят към размера на приложението. Затова е желателно приносът на външните библиотеки да е възможно най-малък.

Ъглов 2.0: 566 KB - 766 KB. Размерът на минифицирания пакет Angular 2 е 566K. Angular 2 разчита на наблюдаван модел, предоставен от библиотеката Rxjs. Размер на Angular 2 с библиотека Rxjs е 766K.

Полимер: 127 KB - 168 KB. Размерът на минимирания полимер 1.6 е 127KB. Той също така изисква полифил, наречен webcomponents.js, за браузъри, където уеб компонентите не се поддържат от самото начало. Размерът на webcomponents-lite.js е 41 KB

Повторна употреба:

Моделът на компонентите предлага много възможности за многократна употреба. Компонентите са малки и изолирани парчета код, които могат да бъдат използвани на множество места на едно и също приложение или в различни приложения.

Angular 2.0: Поддържа компоненти и повторна употреба. Angular 2 компоненти могат да се използват само в Angular2 приложения

Полимер: Поддържа компоненти и повторна употреба. Полимерните компоненти могат в идеалния случай да се използват повторно във всяко уеб приложение. Неполимерното приложение ще трябва да импортира полимерна библиотека, за да може да използва повторно полимерните компоненти.

Структура на приложението:

При големи приложения е важно да има структура на кода. Рамките помагат да се осигури структура и модел на кода.

Angular 2.0: Диктува структура на кода. Ъгъл 2 е пълноценна рамка. Той предоставя начин за структуриране на приложението. Той идва с вградено маршрутизиране на приложения, управление на държавата и комуникация с данни

Полимер: Не се казва по структура. Полимерът улеснява само създаването на компоненти. Въпреки това, полимерният екип е създал малко компоненти, които могат да бъдат използвани за маршрутизиране. Отделна библиотека може да се използва за управление на комуникацията с данни. например Redux или друга библиотека, базирана на Flux.

дълголетието:

При избора на технологичен стек е важно да се вземе предвид дълголетието на рамките / библиотеките. Рамка, която може да остарее или застоя много скоро, е грешен избор за изграждане на приложения.

Angular 2.0: ъпгрейдът на ъгловата версия от 1.x до 2 беше пълно обновяване и на практика ще доведе до пълно пренаписване на приложенията. Angular предостави път за надстройка от 1,4–1,5–2. Но усилието да следвате пътя на надстройката можеше да бъде еквивалентно на пренаписване.

Полимер: Полимерът възнамерява да бъде по-лек с развитието на уеб платформата. Версията за визуализация на Polymer 2 е изчерпана. Полимерът има хибриден режим, при който 1 и 2 могат да работят заедно. Тъй като полимерът не е тежък в рамката, подобренията трябва да бъдат по-лесни.

Изучаване на:

Angular 2.0: Typescript е нов език и неговият „декоратор“ начин на писане също не е добре известен на разработчиците на JavaScript. Въпреки, че предстоящите версии на javascript имат концепция за декоратори. Програмистът ще трябва да научи както рамката, така и езика.

Полимер: Полимерните компоненти могат да бъдат / обикновено написани в ES5 / ES6 javascript. Разработчиците ще трябва да свикнат с концепцията за компоненти (вярно и с Angular 2). Полимерът осигурява минимална синтактична захар над уеб компонентите api, което не налага стръмна крива на обучение.

Рендериране от страна на сървъра:

Визуализацията от страна на сървъра е важна, когато става дума за SEO дружелюбност, визуализации в социалните медии и бърза „възможност за преглед“ на страницата. Въпреки това има много техники за постигане на бърз първи рендеринг дори с клиентска страна. Освен това Google може да индексира клиентски уебсайтове, предоставени от клиента, но други търсачки може да имат проблем с това.

Angular 2.0: Ъгловият екип работи върху Angular Universal, който може да се използва с Angular 2, за да позволи визуализиране от страна на сървъра.

Полимер: Полимерът все още няма поддръжка за визуализация от страна на сървъра.

Препоръчителен стек

Въз основа на горното сравнение, ако днес трябва да избирам преден стек, бих избрал това:

  • Полимерната библиотека е по-лека от Angular 2 frame library.
  • Полимерните компоненти могат да бъдат използвани повторно във всяко приложение, докато Angular 2 компоненти могат да се използват само в Angular 2 приложения
  • Полимерът възнамерява да стане по-слаб с развитието на уеб платформата, т.е. докато браузърите подобряват поддръжката си за спецификациите на уеб компоненти Полимер ще може да намали размера си
  • Redux се основава на Flux модел. Той дава насоки за контролиране на потока от данни в приложението. Това помага при създаването на предвидими и мащабируеми приложения.

Благодаря!! Забавлявай се!

Малко подробна версия на това записване е в моя блог http://dotjsfile.blogspot.in/2017/04/angular2-vs-polymer.html