Имаме ли нужда от рамки за JavaScript?

Като уеб разработчик се опитвам редовно да оценявам кутията си с инструменти и да определям дали мога да направя без този или онзи инструмент. Напоследък проучвах колко лесно е да се разработи сложно приложение за предния край без фронт рамка.

Какво представлява рамката на JavaScript?

Казано по-просто, рамката на JavaScript е инструмент, който можете да използвате за разработване на разширени уеб приложения, особено SPA.

В този ден уеб разработчиците ще внедрят логиката на предния край, като разчитат предимно на ванилни JS и jQuery. Но тъй като приложенията на предния край станаха все по-сложни, инструментите се увеличиха, за да се отговори на тази сложност.

Рамките, които са популярни днес, имат няколко основни общности. Повечето рамки / библиотеки от предния край, от Vue до React, предоставят комбинация от следното:

  • Синхронизация на състоянието и изгледа
  • Routing
  • Система от шаблони
  • Компоненти за многократна употреба

Все още са необходими рамки?

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

Въпросът е: рамки ли са днешната jQuery? Ще решат ли проблемите, които решават, чрез промени като тези в DOM API?

Трудно е да се каже, но напредъкът в родния JS, спецификациите на уеб компонента и лесно конфигурируемите инструменти за изграждане, направиха разработването на SPA без рамка толкова лесно, колкото досега.

За да разгледам по-нататък, разработих приложение за една страница, използвайки само ванилов JavaScript, собствени уеб компоненти и колет. По пътя имаше няколко клопки и трудности, които подчертаха силните страни на JS.

В същото време, след като преминах първоначалните препятствия, бях изненадан от това колко просто беше да се създаде приложение за една страница само с ванилия JS.

Преглед

Приложението е просто. Това е приложение за рецепти с основни възможности за CRUD. Потребителят може да създава, редактира, изтрива, любим и филтрира списък на рецепти.

Началният екранСъздайте екран за рецепта

елементи

Създаването на уеб компонент също е ясно. Създавате клас, който разширява HTMLElement (или HTMLParagraphElement и така нататък) и след това го използвате, за да определите персонализиран елемент.

Можете също така да използвате куки за жизнения цикъл, като свързанCallback, disconnectedCallback, attributeChangedCallback.

Routing

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

Първоначално използвах npm пакет, наречен Vanilla JS Router. С API на историята на браузъра не е всичко толкова сложно да внедрите своя собствен в по-малко от 100 реда код! Забележка: Не прилагам наистина сложна логика като охрана на маршрути.

Това е бързо обобщение. Искам да поддържам тази статия на разумна дължина. Може да напиша последващ пост с по-задълбочено обяснение на заявлението. Внесох някои забавни функции като безкрайно превъртане, персонализирано устройство за изтегляне и пускане и други!

ретроспективен

След като създадох приложението, отделих време да помисля за плюсовете и минусите на целия процес от началото до края. Ще започна с лошите новини.

Против

Спецификацията все още е в поток

Спецификацията на уеб компонента е и стара, и нова. Това е около много по-дълго, отколкото първоначално си мислех. Уеб компоненти бяха въведени от Алекс Ръсел на Fronteers Conference 2011 за първи път. Въпреки това, натискът зад уеб компонентите наистина нарасна през последната година или две. Като такъв все още има много смут в спецсъда. Например, импортирането на HTML е изоставено, въпреки че повечето от документацията / ресурсите все още се позовават на тях.

Тестване

Няма много специални ресурси за тестване на родните уеб компоненти. Има някои обещаващи инструменти като skatejs ssr и тестер на уеб компоненти от Polymer. Но тези инструменти наистина са предназначени за използване със съответните им библиотеки. Това представлява някои трудности за използване с родните уеб компоненти.

Промяна на откриване

Наличието на основна система, която автоматично поддържа изгледа в синхрон с модела на данни, е невероятно. Именно това привлече мнозина към ъгловите и други рамки на първо място.

Поддържането на състояние в синхрон с изгледа не е толкова трудно в малък мащаб. Но това може да излезе извън контрол много бързо и вие ще намерите себе си добавяне на множество слушатели на събития и избиратели на заявки.

Сянката DOM

Наистина съм разкъсана за сенката DOM. От една страна, обичам идеята за капсулиране. Това е разумен модел на дизайна, прави стила ви каскада по-управляем, опростява вашите притеснения и т.н. Въпреки това, тя също така създава проблеми, когато искате някои неща да проникнат в това капсулиране (като споделен стилов лист) и в момента се водят дебати за най-добрия начин да направите това.

Генериране на DOM структури

Част от великолепието на рамки / библиотеки като Angular и React е, че те са господари на своя DOMain. Тоест, те са отлични в ефикасното изобразяване и рендериране на структури в DOM. От блога на Angular University:

Angular не генерира HTML и след това го предава на браузъра, за да го разбере, вместо Angular директно генерира DOM структури от данни!

Например ъглови, за разлика от jQuery, прави директно DOM структури от данни. Тоест, вместо да предавате HTML на браузъра, който трябва да бъде анализиран, и след това да бъде направен в DOM структури от данни. Това е по-ефективно, тъй като елиминира тази стъпка на анализ. Виртуалният DOM също е доста полезен, тъй като ви пречи да рендерирате всичко всеки път, когато трябва да актуализирате изгледа си.

Професионалисти

От друга страна, има някои неоспорими ползи от развитието на приложения по този начин:

Размер на пакета

Крайният продукт може да бъде (акцент върху консервата) толкова по-малък и по-компактен от всичко, разработено със съвременна рамка. Например, окончателното сглобяване на моето пълнофункционално приложение за рецепти беше по-малко от половината от размера на свежа ъглова конструкция.

Размер на ъгловия снопПакет от рецепти за рецепти

Забележка: Това са актуализираните, оптимизирани размери на пакета.

разбиране

Ако сте наистина разработени само с рамка и нейния CLI, може да бъде чудесно упражнение да направите уеб приложение без допълнителни инструменти. Тъй като някой, който иска да постигне определено ниво на овладяване (доколкото е възможно) на уеб разработката, за мен беше изключително важно да придобия повече практически опит с инструменти за изграждане, API на браузъра, модели на дизайн и т.н.

производителност

Това, което тези рамки и библиотеки правят отзад, е невероятно. Можете обаче да платите цена за изпълнение, ако решите да използвате някой от тях; няма такова нещо като безплатен обяд. Има много потенциални плъзгания на производителността в мащаб: независимо дали е пропиляно повторно показване, излишни слушатели, дълбоко сравнение на обекти или ненужни и големи DOM манипулации. Тук можете да изрежете много сложност, като внедрите неща от нулата.

Екипите на Angular и React изглежда са наясно с тези клопки и са предоставили неща като отменителя на метода ShouldUpdate и onPush ChangeDetection като средство за допълнителна оптимизация на производителността.

Простота и собственост на код

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

Бележки и интересни лакомства

Имах взрив при работа с Парцел. Чувствах се малко по-ограничен от Webpack на моменти, когато се опитвах да заобикалям определени крайни случаи, но открих, че в най-голямата си част версията с етикети „zero config“ е вярна.

Също така ми е ясно, че много етикети React „библиотека“ и Vue „прогресивна“ рамка. Въпреки че разбирам причините за това, мисля, че React, Vue и Angular решават много от едни и същи проблеми. Ето защо ги разглеждам всички заедно под термина „рамки“.

Защо да не използвате Stencil или Polymer? Исках да избегна максимално използването на пакети, библиотеки и рамки. Исках да видя колко далеч са се повишили уеб стандартите, за да отговорят на съвременното развитие (освен инструментите за изграждане).

Сигурен съм, че много други начини за разработване на SPA или предно приложение като цяло без основна рамка или библиотека, опитах по един начин тук и бих искал да чуя за други!

резюме

Голяма евристика за решението да се използва или не да се използва рамка е това, което аз наричам „върховата точка“. Идва момент, когато приложението ви расте, където в крайна сметка създавате своя собствена рамка, за да използвате отново функционалността и структурата. Например имате куп форми и искате да създадете логика за многократна употреба за реактивно валидиране.

Ако приключите в този момент, трябва да решите дали си струва да инвестирате време в създаването на системи, за да постигнете това, което можете бързо да постигнете с рамка или библиотека. Ще има различни съвети в зависимост от това какви са вашите времеви или бюджетни ограничения, но рамките все още са много подходящи предвид правилните сценарии.

Това каза, че голяма част от това, което правят рамките, вероятно ще стане по-лесно с по-малките библиотеки и / или естествения код с течение на времето. Вземете моето приложение като пример. В същото време, ако големите рамки и библиотеки останат многофункционални, те могат да преобразуват, адаптират и се придържат. Ако не, те могат да се окажат като jQuery - инструмент от миналото в по-голямата си част.

заключение

В заключение има многообещаващи начини за разработване на сложни приложения за предни крайници без рамки. Въпреки това, спецификацията за неща като уеб компоненти все още се развива и има задачи, които трябва да бъдат разработени. Рамките все още правят много невероятни неща и могат да направят развитието много по-гладко.

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

ресурси