15 основни инструмента за JavaScript, които трябва да използвате
JavaScript е жизненоважен инструмент за всеки уеб разработчик. За да ви помогнем да извлечете най-доброто от този мощен език за програмиране, ще искате да привлечете помощта на някои специализирани инструменти (и да получите уеб хостинг вдясно). Добрата новина е, че тук не ви липсват опции: наоколо има много инструменти за JavaScript, от които да избирате. Трудната част е да изберете тези, които са подходящи за вас и вашия работен процес.
В тази статия сме събрали най-добрите инструменти на JavaScript в момента. Ако не сте разработчик или просто искате да създадете сайт бързо и без нужда от код, помислете дали да не използвате уеб конструктор .
01. Уеб компоненти
Концепцията за компонент се използва широко в рамките на JavaScript. Те се използват за разделяне на проект на няколко парчета за многократна употреба, които могат да се преместват независимо един от друг. Но какво се случва, когато е време да промените рамката? По-рано написаните компоненти вече няма да работят. Или има добавено натоварване за конвертиране на компонентите, или проектът остава обвързан с тази рамка.
Уеб компоненти са решение на този проблем. Те са написани с помощта на собствени уеб технологии, самостоятелни са и излагат стойности и поведения чрез атрибути като всеки друг HTML елемент.
Те се състоят от три отделни спецификации: HTML шаблони, DOM в сянка и персонализирани елементи.
HTML шаблони
Те определят визуалния външен вид на даден компонент. Те съдържат структурата на съдържанието, което след това може да бъде копирано и използвано повторно за всеки компонент на страницата.
Сянка DOM
Концепцията за запазване на вътрешната маркировка на компонента далеч от останалата част на документа. Това предпазва стиловете и другата логика от разбиване и засягане на други компоненти.
Персонализирани елементи
Това са лепилото, което държи всичко заедно. Те са отговорни за жизнения цикъл на компонента, който може да включва допълнителна логика за това кога компонентът е добавен или премахнат от страницата.
Уеб компонентите могат да се използват заедно с техните аналози на рамката. Тъй като те трябва да действат като естествени елементи, повечето рамки ще работят с тях без проблем. За някои рамки, като Angular, може да се наложи предварително да се каже за тяхното съществуване, за да функционират правилно.
Тъй като те могат да бъдат лесно съставени заедно, компонентите могат да бъдат импортирани от много източници. Уебсайтове като webcomponents.org осигурете няколко готови елемента, които могат да се пуснат и да се използват веднага.
Въпреки че концепцията за уеб компонент съществува от 2011 г., спецификациите постоянно се променят. През 2018 г. нещата се уредиха, като през октомври Firefox внедри най-новите версии на спецификациите на DOM в сянка и потребителските елементи. С Edge, който ще бъде внедрен през 2019 г., всички основни браузъри ще ги поддържат.
02. WebAssembly
Едно от оплакванията относно използването на браузъра за хостване на приложения е, че JavaScript работи твърде бавно, когато става въпрос за задачи с интензивен процесор, като двигатели на игри или видео редактиране.
WebAssembly - или „WASM“ - е цел на компилиране за код, написан на други езици, по-подходящи за тежко повдигане. Това позволява на съществуващите програми, написани на езици като C ++, Rust или Go, да стигнат до мрежата. Чрез компилирането им в двоичен формат, това им позволява да бъдат разделени на парчета и изтеглени ефективно.
След това тези двоични файлове се компилират в паметта и се създават екземпляри с помощта на новия обект WebAssembly. Има тласък да се направят тези вносни като всички други модули на JavaScript, но работата в тази област все още продължава.
Въпреки че WASM е нов език за работа в браузъра, това не го прави конкурент на JavaScript. И двата езика имат своите предимства, като JavaScript все още се поддава по-добре на ежедневните операции в браузъра. Те могат да работят заедно и да имат автономия над отделни части на приложение.
WASM има поддръжка на различни браузъри, включително мобилни. Това отваря вратата към много възможности, които преди бяха ограничени до родните приложения. През следващата година може да видим повече игри и разработчици на приложения да възприемат тази технология.
03. Изглед
Изглед се увеличава непрекъснато през последната година. Последните актуализации са съсредоточени повече върху опита на разработчиците и подобренията на качеството. Vue 2.5 беше пуснат през 2017 г. и включваше актуализации на обработката на грешки, изобразяване на сървъри и дефиниции на TypeScript. Единичните функционални компоненти - една от най-популярните функции на Vue - бяха актуализирани, за да поддържат CSS с обхват, както и подобрена компилация на шаблони.
Оттогава актуализациите на основния опит на Vue са фокусирани най-вече върху корекции на грешки и подобрения в производителността. Сега фокусът е изместен към допълнителни продукти за развитие.
Версия 3 на инструмента CLI на Vue преминава към по-конфигурируем подход. Функции като маршрутизиране, свързване и управление на данни се избират по време на инициализацията. Тези функции могат да се добавят и премахват при необходимост, без да се отделя процесът на изграждане.
Заедно с CLI има уеб интерфейс, който може да визуализира различните части на приложението. Това действа като табло за управление, което помага да се анализират времената на натоварване, размерите и болезнените точки в компилацията, докато тя работи.
С нетърпение, през 2019 г. ще излезе Vue 3.0. Въпреки че промените в счупването ще бъдат сведени до минимум, тази версия ще се фокусира върху използването на компоненти, базирани на клас ES2015. Той също така ще поддържа фрагменти и портали, подобно на функциите в React.
- Научете повече: Ускорете производителността с Vue.js
04. TypeScript
Донесете безопасността на типа в JavaScript с TypeScript . Този инструмент ви позволява да дефинирате очаквани типове за променливи и да имате инструменти за изграждане и IDE да ви предупреждават за всякакви проблеми. Версия 3 предоставя по-добра поддръжка за по-нови концепции, като оператори за почивка и разпространение.
- Научете повече: Как да започнем с TypeScript
05. Реагирайте
Реагирайте 16.6 донесе функцията „suspense“, която улесни работата с динамичното съдържание. Комбинирано с React.lazy () , създава точка, при която кодът да се раздели на по-малки парчета. Съспенсът може да изобрази резервен компонент, като товарен предел, докато компонентът се зарежда. През 2019 г. напрежението ще прерасне в по-гъвкав инструмент. Чрез задействането на извличане на данни като част от потока, потребителите ще получат безпроблемно естествено изживяване.
Един от най-лесните начини да стартирате и стартирате с React е като използвате инструмента ‘Create React App’, за да премахнете проект. Неотдавнашна актуализация надстрои зависимостите му и подобри функциите му. Create React App 2.0 използва Babel 7 и Webpack 4 за изграждане на проекти, което улеснява изграждането и отваря вратата към по-нови функции като синтаксиса на стенографските фрагменти.
Проектите, направени с предишната версия, могат да бъдат надстроени чрез актуализиране на зависимостта ‘response-scripts’. Актуализирането на изхвърлените приложения е по-ръчен процес, но те могат да бъдат надграждани парче по парче.
React не показва признаци на забавяне през тази година. Куките позволяват на функционалните компоненти да определят поведението и жизнения цикъл. Едновременният режим подобрява производителността на компонентите с бавно изобразяване. И двете функции са предвидени да бъдат пуснати през първата половина на 2019 г.
- Научете повече: Разработване на компоненти за многократна употреба на React
06. Ъглова
Ъглова е рамка, включена във всички части на приложение, включително обработка на данни и актуализации на интерфейса. Въпреки че може да надуе размери на пакета, всички части на приложението ще работят заедно.
Версия 7 на Angular добавя подобрения във всяка част на рамката. Макар че има малко промени, с които разработчиците ще се заиграят, има много промени, които да се възползват от скоростта и надеждността зад кулисите. Вече е възможно да добавите бюджети за производителност за размери на пакети. Това ще гарантира, че компилацията никога няма да стане прекалено голяма, без да бъде осведомена.
Като част от цялостната актуализация на Material Design, съответните ъглови CDK компоненти също са актуализирани. Например, модулът за превъртане позволява поддръжка за виртуално превъртане, което помага да се поддържат дълги списъци, които се движат гладко.
Надграждането до версия 7 за повечето ще включва пускане на един ред с помощта на CLI.
ng update @angular/cli @angular/coreБъдещите актуализации ще се фокусират върху новия механизъм за рендиране на Ivy. Това ще подобри възможността за премахване на неизползвания код от пакета, което води до драстично намаляване на размера на файла. Поради структурата на ъгловите приложения, механизмът за рендиране може да бъде заменен, без да се изискват промени във вътрешната логика.
07. Полимер
В първата си итерация, Полимер библиотеката беше врата към бъдещето на потребителските елементи. Приемайки предстоящите спецификации на уеб компонентите, разработчиците успяха да обединят уебсайтове от готови градивни елементи.
С течение на времето тези спецификации се развиха и един от градивните елементи - импортирането на HTML - вече не беше част от плана. Неотдавнашното издание на Polymer 3.0 разглежда този проблем и се фокусира повече върху използването на по-достъпни ES модули за постигане на подобна цел.
Първоначалната цел на библиотеката Polymer беше да стане по-лека, тъй като поддръжката за тези спецификации нарастваше, но в крайна сметка тя нарастваше вместо това. За да се фокусираме отново върху тази цел, 3.0 е последната издадена версия на библиотеката. Придвижвайки се напред, препоръчително е компонентите да се правят с LitElement и lit-html .
class MyElement extends LitElement { render(){ return html` This is a LitElement `; } } LitElement е лека обвивка около уеб компоненти, за да улесни работата им. The html маркираният буквален шаблон е lit-html , което е библиотека за шаблони с DOM, която се различава, за да поддържа актуализациите на страниците възможно най-малки.
И двете LitElement и lit-html са в състояние на предварителна версия в момента, но екипът на Polymer има за цел да ги освободи в някакъв момент в началото на тази година.
08. По-хубава
Този инструмент на JavaScript е предназначен да гарантира, че форматирането на кода остава последователно в целия проект. Имайте По-хубава разресвайте файлове и актуализирайте форматирането автоматично. Някои редактори също поддържат форматиране при всяко записване.
Ако работите по екипен проект, уверете се, че вашият процес е напълно свързан с перфектното съхранение в облака опция.
09. Обслужващи работници
Обслужващи работници активирайте приложението да изпълнява фонов процес, който управлява някои функции от по-ниско ниво. Това може да включва push известия, синхронизиране на данни във фонов режим и дори предоставяне на опит, когато устройството е офлайн. Нивото на контрол зависи от разработчика.
Сервизните служители съществуват от известно време на Android, но също така наскоро са преминали към iOS. Въпреки че фокусът е върху мобилните устройства, те работят и на настолни компютри. Сега, когато по-голямата част от посетителите ще имат достъп до функционалността, няма по-добро време да започнете да подобрявате практическата работа за потребителите.
10. OffscreenCanvas
Има моменти, когато платнен елемент е най-добрият инструмент за работата. Например онлайн игрите могат да ги използват, за да генерират спрайтове, или видеоклиповете могат да имат обработващи ефекти, приложени към тях.
Проблемът е, че всяко взаимодействие с елемента винаги ще работи върху основната нишка, което забавя нещата за потребителя. При многократни анимации или тежка обработка това може да се превърне в проблем.
OffscreenCanvas отделя логиката на платното от елемента. Без връзката към DOM, той може да се използва в работник за освобождаване на основната нишка. Понастоящем само Chrome поддържа тази функция, като Firefox я включва зад флаг.
11. Електрон
Използвайте HTML, CSS и JavaScript за изграждане на собствени приложения за Windows, MacOS и Linux. Електрон задвижва много популярни приложения, като Visual Studio Code, Slack и Skype за десктоп.
12. Свелте
Докато Свелте е относително неизвестна рамка, тя непрекъснато набира популярност от пускането си преди няколко години. Неотдавнашното проучване на състоянието на JavaScript го класира по-популярно миналата година от историческите титани на Backbone и jQuery.
Целта на Svelte е да намали размера на файла, като изобщо не изпраща рамка. Като част от процеса на изграждане, той анализира компонентите и ги оптимизира, преди да компилира във ванилов JavaScript. Резултатът е приложение с възможно най-малкия размер.
С версия 2 има подобрения в синтаксиса, за да направят компонентите възможно най-четливи и предвидими. Актуализациите на куките на жизнения цикъл и изчислените стойности улесняват компилатора да знае къде да направи оптимизации.
Функциите са умишлено леки, за да поддържат всяко приложение бързо. Много актуализации след версия 2 са фокусирани върху избягването на ситуации, които водят до лоша производителност на компилирания изход.
Водят се дискусии за пренаписване на компонентната логика в Svelte, за да се приведе в съответствие с други рамки. Като компилатор той може да прави свои собствени модификации, за да помогне да функционира по-добре, като същевременно остава чиста среда за разработчиците.
13. Преоразмеряване на наблюдател
Един наистина базиран на компоненти подход към уеб разработката е по-близък от всякога. Въпреки че CSS и JavaScript могат да бъдат обединени в един пакет, трудно е след това да използвате повторно този компонент надеждно на страниците.
При добавяне на елементи към a преоразмеряване на наблюдателя , той се известява, когато границите на елемента се променят. След това визуалните елементи могат да бъдат актуализирани въз основа на наличното пространство. Като пример, един и същ компонент на картата може да изглежда различно както в страничната лента, така и в основното тяло.
Понастоящем този наблюдател е достъпен само в Chrome, докато е в процес на разработка във Firefox. Други браузъри могат да се върнат към наблюдение на събитията за преоразмеряване на браузъра, но това ще засегне производителността.
14. Кордова
Създайте множество различни мобилни и настолни приложения, използвайки уеб технологии и една кодова база с Кордова . PhoneGap - дистрибуцията на Adobe на Cordova - предоставя допълнителни инструменти, като например разработка на iOS за Windows.
15. Книга с разкази
Книга с разкази ви позволява да създадете галерия от елементи на потребителския интерфейс в адаптивна среда, отделно от всяко приложение. Той работи с популярни рамки като React и Vue, заедно с поддръжка за HTML фрагменти.
Тази статия първоначално е публикувана в списание за творчески уеб дизайн Уеб дизайнер . Купете издание 283 или абонирайте се тук .
Прочетете още:
- Как да кодирам по-бързо, по-лек JavaScript
- Разгледайте още страхотни инструменти за JavaScript тук
- Страхотни API на JavaScript
