Кутняя 2,0 супраць палімернай

Прывітанне хлопцы! Перш чым пачаць параўноўваць гэтыя дзве рамкі / бібліятэкі javascript, трэба зразумець, як змяняецца спосаб развіцця Інтэрнэт і як новыя рамкі спрабуюць палегчыць гэтыя змены.

Новы спосаб вэб-распрацоўкі

Кампаненты

  • Модульны дызайн і распрацоўка - папулярныя прынцыпы сярод распрацоўшчыкаў. У свеце вэб-распрацовак развіццё кампанентаў развівалася па прынцыпе модульнасці.
  • Модульны код просты ў абслугоўванні і паўторным выкарыстанні. Існуе меншая верагоднасць памылак з-за меншага, ізаляванага і больш выпрабаванага кода.
  • Такія рамкі, як Angular, Ember, React, Backbone і іншыя, прадставілі ўласныя рашэнні для кампанентызацыі ў Інтэрнэце.

Вэб-кампаненты

  • Вэб-кампаненты прынеслі канцэпцыю кампанентаў у аглядальнікі. Хоць мы ўсё яшчэ можам выкарыстоўваць кампактныя рашэнні, якія прадастаўляюцца рамкамі, натыўныя кампаненты вэб прыносяць такую ​​ступень паўторнага выкарыстання, якую іншыя рамкі не могуць дасягнуць.
  • Вэб-кампаненты складаюць модулі функцыянальнасці ў самую асноўную адзінку HTML, элемент DOM. З прагрэсам у вэб-кампанентах яны сталі спосабам перайсці на модульны код у Інтэрнэце.
  • Спецыфікацыі вэб-кампанентаў пакуль не ў поўнай меры рэалізаваны ўсімі браўзарамі. Але пастаўшчыкі браўзэраў актыўна рэалізуюць розныя часткі спецыфікацыі, гэта значыць, што падтрымка вэб-кампанентаў толькі паляпшаецца.

Мост да вэб-кампанентаў

Кутняя 2,0

  • Angular - гэта адна з самых папулярных распрацовак javascript сярод распрацоўшчыкаў. Апошняя версія Angular (Angular 2) таксама працуе над канцэпцыяй кампанентаў.
  • Angular 2 - гэта паўнавартасная праграма JavaScript, якая не толькі дазваляе ствараць кампаненты, але і дапамагае ў кіраванні рознымі аспектамі вэб-прыкладанняў, як маршрутызацыя і кіраванне дзяржавай.
  • Кутні 2 таксама можа быць наладжаны для стварэння вэб-кампанентаў.

Палімер

  • Палімерная бібліятэка - гэта лёгкі цукровы пласт у верхняй частцы API вэб-кампанентаў. Палімер - гэта бібліятэка, якая дапамагае нам выкарыстаць увесь патэнцыял вэб-кампанентаў.
  • У адрозненне ад тыповай рамкі JavaScript, палімер прызначаны для выкарыстання функцый, закладзеных на самой вэб-платформе, каб ствараць кампаненты.
  • #UseThePlatform - гэта назва Polymer, якая ўяўляе жаданне браўзэра зрабіць усё цяжкае ўздзеянне без бібліятэк.

Як яны параўноўваюць

Памер:

Памер вэб-прыкладання аказвае непасрэдны ўплыў на прадукцыйнасць часу загрузкі. Акрамя кода прыкладанняў і актываў, памеры дадатку дадаюць знешнія рамкі і бібліятэкі. Таму пажадана, каб уклад знешніх бібліятэк быў як мага меншым.

Кутняя 2,0: 566 КБ - 766 КБ. Памер пакета куфараванага кутняга 2 складае 566K. Angular 2 абапіраецца на назіраецца ўзор, прадастаўлены бібліятэкай Rxjs. Памер Angular 2 з бібліятэкай Rxjs складае 766K.

Палімер: 127 КБ - 168 КБ. Памер мініфікаванага палімера 1.6 складае 127 КБ. Акрамя таго, для браўзэраў, дзе вэб-кампаненты не падтрымліваюцца першапачаткова, не патрабуецца запоўненне пад назвай webcomponents.js. Памер вэб-кампанентаў-lite.js складае 41 Кб

Паўторнае выкарыстанне:

Шаблон кампанентаў дае шмат магчымасцей для паўторнага выкарыстання. Кампаненты - гэта невялікія і ізаляваныя кавалкі кода, якія можна выкарыстоўваць у некалькіх месцах аднаго і таго ж прыкладання альбо ў розных дадатках.

Angular 2.0: Падтрымка кампанентаў і паўторнае выкарыстанне. Angular 2 кампаненты могуць быць выкарыстаны толькі ў праграмах Angular2

Палімер: падтрымлівае кампаненты і паўторнае выкарыстанне. Палімерныя кампаненты ў ідэале могуць быць выкарыстаны ў любым вэб-дадатку. Для непалімернага прымянення неабходна імпартаваць палімерную бібліятэку, каб мець магчымасць паўторна выкарыстоўваць палімерныя кампаненты.

Структура прыкладання:

У вялікіх дадатках важна мець структуру кода. Рамкі дапамагаюць забяспечыць структуру і ўзор кода.

Angular 2.0: Дыктуе структуру кода. Кутні 2 - гэта паўнавартасны каркас. Гэта дае спосаб структураваць прыкладанне. Ён пастаўляецца з убудаванай маршрутызацыяй прыкладанняў, кіраваннем дзяржавай і перадачай дадзеных

Палімер: Не скажу ў структуры. Палімер палягчае стварэнне толькі кампанентаў. Аднак палімерная каманда стварыла некалькі кампанентаў, якія можна выкарыстоўваць для маршрутызацыі. Для кіравання перадачай дадзеных можна выкарыстоўваць асобную бібліятэку. напрыклад, Redux або любая іншая бібліятэка на аснове Flux.

Даўгавечнасць:

Пры выбары стэка тэхналогій важна ўлічваць даўгавечнасць рамак / бібліятэк. Рамка, якая вельмі хутка можа састарэць альбо застойвацца - няправільны выбар для стварэння прыкладанняў.

Angular 2.0: Абнаўленне версіі Angular з 1.x да 2 стала поўным пераабсталяваннем і практычна выкліча поўнае перазапіс прыкладанняў. Кутняя сапраўды забяспечыла шлях абнаўлення ад 1,4–1,5–2. Але намаганні наступнага шляху абнаўлення маглі б быць эквівалентам перапісаць.

Палімер: Палімер мае намер быць больш лёгкім з развіццём вэб-платформы. Версія для папярэдняга прагляду Polymer 2 адсутнічае. Палімер мае гібрыдны рэжым, у якім 1 і 2 могуць працаваць разам. Паколькі палімер не з'яўляецца сур'ёзным, мадэрнізацыя павінна быць прасцей.

Навучанне:

Angular 2.0: Тыпізатар - гэта новая мова, а распрацоўшчыкі javascript таксама не ведаюць спосаб "дэкаратара". Хоць, будучыя версіі javascript маюць канцэпцыю дэкаратараў. Распрацоўшчыку прыйдзецца вывучаць асновы і мову.

Палімер: Палімерныя кампаненты могуць / звычайна напісаны на JavaScript ES5 / ES6. Распрацоўшчыкам прыйдзецца прывыкнуць да канцэпцыі кампанентаў (дакладна гэта таксама і з Angular 2). Палімер забяспечвае мінімальны сінтаксічны цукар над ІП-кампанентамі, што не наводзіць стромкую крывую навучання.

Рэндэрынг на баку сервера:

Рэндэрынг на баку сервера важны, калі гаворка ідзе пра SEO дружалюбнасць, папярэдні прагляд сацыяльных медыя і хуткую магчымасць прагляду старонкі. Аднак існуе мноства метадаў для дасягнення хуткага першага рэндэрынгу нават пры рэндэрынгу на баку кліента. Акрамя таго, Google можа індэксаваць кліенцкія сайты, аказаныя кліентам, але ў іншых пошукавых сістэмах могуць паўстаць праблемы.

Angular 2.0: Angular team працуе над Angular Universal, які можна выкарыстоўваць з Angular 2, каб дазволіць серверную візуалізацыю.

Палімер: Палімер яшчэ не падтрымлівае серверную візуалізацыю.

Рэкамендаваны стэк

Зыходзячы з вышэйзгаданага параўнання, калі мне сёння трэба выбраць перадпакоі, я б выбраў наступнае:

  • Палімерная бібліятэка лягчэйшая за рамкі бібліятэкі Angular 2.
  • Палімерныя кампаненты могуць быць выкарыстаны паўторна ў любым дадатку, у той час як кампаненты Angular 2 могуць быць выкарыстаны толькі ў Angular 2
  • Палімер мае намер схуднець з развіццём вэб-платформы, гэта значыць, калі браўзэры паляпшаюць сваю падтрымку спецыфікацыям вэб-кампанентаў, палімер зможа паменшыць яе памер
  • Redux заснаваны на малюнку Flux. Ён дае рэкамендацыі па кантролі патоку дадзеных у дадатку. Гэта дапамагае стварыць прадказальныя і маштабуюцца прыкладанні.

Дзякуй !! Весяліцца!

Крыху падрабязная версія гэтага рэцэпту знаходзіцца ў маім блогу http://dotjsfile.blogspot.in/2017/04/angular2-vs-polymer.html