Отвъд jQuery: Експертно ръководство за JavaScript рамки

Определящата характеристика на един наистина добър програмист е мързелът. Това обаче не означава глупаво или невежо. Наистина добрият мързелив програмист не пише (след това трябва да отстранява грешки и тества) 100 реда код, когато ще свърши 10. В света на JavaScript истински мързеливият разработчик ще разчита на ефективна, добре тествана и добре поддържана рамка, за да избегне постоянно преоткриване на решения на често срещани проблеми.

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

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

Малко история на JavaScript

Историята на JavaScript се връща към разработката, която Брендън Айх направи върху езика Mocha за компанията за уеб браузъри Netscape през 1995 г. Mocha беше пуснат като LiveScript по-късно същата година и преименуван на JavaScript, когато Sun предостави на Netscape лиценз за търговска марка. Опитът да обвърже лекия C-подобен интерпретатор на JavaScript с несвързаната Java с тежка категория - обектно-ориентиран, компилиран от жетони език - с подобно име изглеждаше като добра идея за маркетингови цели през 1995 г., но през годините този избор имаше не предизвика край на объркване.

Разработването на JavaScript през следващото десетилетие бе белязано от разногласия между внедряващите браузъри и доста слаби усилия по стандартите на ECMA. Това, което промени това неразположение и ренергизира езика, беше възходът на Dynamic HTML и Ajax в средата на 2000-те години, последван бързо от въвеждането на JavaScript библиотеки с отворен код като Prototype, jQuery, Dojo и MooTools, които трябваше да направят Dynamic HTML и Ajax по-лесни за използване и да предоставят „джаджи“ за JavaScript, които биха подобрили функционалността на контролите на HTML формуляри.

Въпреки че Netscape пусна JavaScript сървър малко след JavaScript за браузъра, езикът наистина не излетя за фонова употреба до възхода на Node.js, започващ през 2009 г. Част от това, което направи Node.js привлекателен, беше използването на Google силно настроен V8 JavaScript двигател за библиотечни модули, с основен код в доста преносим C ++.

Тази обиколка на JavaScript рамки е опит за осмисляне на основните днешни библиотеки на JavaScript в три категории: такива, които се изпълняват в сървъри Node.js, такива, които работят в браузъри, и такива, които поддържат местни или хибридни мобилни приложения.

Node.js рамки

Node.js е базирана на JavaScript и C ++ сървърна технология, която привлече доста внимание и подкрепа от представянето си (до бурни овации) от автора Райън Дал в Европейския JSConf през ноември 2009 г. Node.js се отличава с управлявана от събития архитектура, способна на асинхронни I / O, малък отпечатък на паметта и висока производителност и мащабируемост за уеб приложения.

Докато Node.js разполага с всички части, необходими за реализиране на уеб сървър, писането на този слой отнема известна работа. TJ Holowaychuk пусна Express 1.0 Beta през юли 2010 г. и скоро се превърна в „сървър по подразбиране“ за Node.js и част от стека MEAN, с базата данни MongoDB и фреймворка Angular.JS.

Въпреки това различните разработчици и организации имат различни нужди. Express е породил пряко или косвено Locomotive, Hapi, Koa, Kraken и Sails.js. Meteor е съвсем различен, въпреки че и той работи на Node.js.

Експрес. Express е минимална и гъвкава рамка за уеб приложения на Node.js, предоставяща стабилен набор от функции за изграждане на едностранични, многостранични и хибридни уеб приложения. Express API се занимава с уеб приложението, HTTP заявките и отговорите, маршрутизацията и междинния софтуер. От Express 4.x поддържаният междинен софтуер за Express се намира в редица отделни хранилища.

Изплуваха няколко вилици Express и добавки за Express, включително Locomotive, Hapi и Koa. Koa е създаден от един от основните участници в Express.

Express е по-стар от своите потомци и има по-голям отпечатък. Въпреки това той има и по-голяма общност и по-голяма стабилност. Постоянно виждам Express включен в други рамки и инструменти без коментар, сякаш това е единственият възможен избор за изграждане на уеб сървър на Node.js. На GitHub рамката има повече от 23 000 звезди и 4000 вилици.

Хапи. Hapi е лесна за използване, ориентирана към конфигурацията рамка с вградена поддръжка за проверка на входа, кеширане, удостоверяване и други основни съоръжения за изграждане на уеб и приложения за услуги. Hapi позволява на разработчиците да се съсредоточат върху писането на многократно използвана логика на приложенията по силно модулен и предписателен начин. Той е разработен от Walmart Labs и е добър избор за големи екипи и големи проекти.

Първоначално Hapi е построен върху Express, но по-късно е преработен, за да бъде самостоятелен. Тя се основава на идеите, че „конфигурацията е по-добра от кода“ и „бизнес логиката трябва да бъде изолирана от транспортния слой“. В примера по-горе забележете колко ясна и чиста е конфигурацията на сървърните маршрути в кода.

Коа. Koa е нова уеб рамка, проектирана от екипа зад Express, но независима от Express кода. Koa се стреми да бъде по-малка, по-изразителна и по-стабилна основа за уеб приложения и API. Koa използва генератори ES6 за междинен софтуер, вместо да използва обратни извиквания на Node.js. По-долу е приложението „Който, здравей, свят“, използващо генератор, който прави a, за yield nextда предаде управлението на следващия генератор:

Разликата между генераторите на среден софтуер, използвани от Koa, и обратните обаждания, използвани от Express и Connect, е, че получавате повече гъвкавост с генераторите. Например, Connect просто предава управление чрез поредица от функции, докато се върне, докато Koa дава контрол „надолу по веригата“, след което контролът тече обратно „нагоре“. В горния пример x-response-time „увива“ генератора на отговори, като yield nextизявлението маркира повикването. Добивът е по-гъвкав от изричните извиквания на функции, тъй като улеснява вмъкването на друг генератор в последователността - например уеб регистратор между таймера и отговора.

Кракен. Проект с отворен код на PayPal, Kraken е сигурен и мащабируем слой, който разширява Express чрез предоставяне на структура и конвенция, подобно на Locomotive. Въпреки че Kraken е основният стълб на неговата рамка, следните модули могат да се използват и независимо: Lusca (сигурност), Kappa (NPM прокси), Makara (LinkedIn Dust.js I18N) и Adaro (LinkedIn Dust.js Templating).

Kraken разчита yoда генерира проекти, както е показано на екранната снимка вляво. Подобно на Локомотив, той организира своите проекти в конвенционални директории, подобни на Rails, включително модели, контролери и конфигурация. Като генериран, Kraken се свързва с Express като стандартен междинен софтуер, дефиниран като app, който след това има своите app.use()и app.listen()извикани методи. Всеки маршрут в сървъра на Kraken живее в свой собствен файл в папката контролери.

Локомотив. Като уеб рамка за Node.js, Locomotive поддържа MVC модели, RESTful маршрути и конвенции за конфигурация (като Rails), като същевременно се интегрира безпроблемно с всяка база данни и шаблонни машини. Локомотивът се основава на Express и Connect, което е проста лепилна рамка за междинния софтуер, използвана от редица Node.js рамки.

Локомотив добавя към Express някаква структура, подобна на Ruby on Rails, която можете да видите на изображението по-горе, която Express липсва в противен случай. Локомотивните изгледи често са вградени JavaScript (html.ejs) файлове, както е показано тук, но Локомотивът също така поддържа Jade и други съвместими шаблони за Express. Функционалността REST се контролира от маршрути, както обикновено се случва в сървърите, базирани на Express. Можете да използвате каквато база данни и ORM (обектно-релационно картографиране) слой искате с Locomotive. Ръководството демонстрира използването на MongoDB с Mongoose, както и работата с Passport за удостоверяване на потребителя.

Метеор. Meteor ви дава коренно по-лесен начин за изграждане на мобилни и уеб приложения в реално време, изцяло в JavaScript, от една кодова база. Вместо да изпраща HTML по кабела, Meteor изпраща данни от сървъра, за да ги изобрази клиентът. В допълнение към самостоятелното стартиране, Meteor може да се интегрира с AngularJS и React. Meteor не прилича на Express, въпреки че е изграден и върху Node.js и поддържа шаблони за Handlebars, Blaze и Jade.

Meteor дава възможност за бързо прототипиране и произвежда код на различни платформи (Web, Android, iOS). Той се интегрира с MongoDB, използвайки Протокола за разпределени данни и модел за публикуване-абониране, за да разпространява автоматично промените в данните на клиенти, без да изисква от разработчика да пише какъвто и да е код за синхронизация. От клиента Meteor зависи от jQuery и може да се използва с всяка библиотека с джаджи за потребителски интерфейс на JavaScript.

Meteor е разработен от Meteor Development Group, стартиране, инкубирано от Y Combinator. Meteor вече е достатъчно зрял, за да поддържа половин дузина учебни книги. Проектът привлече повече от 32 000 звезди на GitHub.

Самият Meteor е безплатен софтуер с отворен код, но групата Meteor го монетизира, като продава абонаменти за Meteor Galaxy DevOps, които включват AWS сървърно пространство и основна поддръжка на Meteor, както и отделен абонамент за поддръжка на Premium.

Sails.js. С Sails можете да създавате персонализирани, корпоративни приложения Node.js. Той е проектиран да подражава на познатия модел на модел-view-controller (MVC) на рамки като Ruby on Rails, но с поддръжка за изискванията на съвременните приложения: API, управлявани от данни, с мащабируема, ориентирана към услуги архитектура. Той е особено добър за изграждане на приложения за чат, табла за управление в реално време или игри за мултиплейър, но можете да го използвате за всеки проект за уеб приложения. Sails поддържа WebSockets и автоматично изпраща сокет съобщения до маршрутите на вашето приложение.

Подобно на Rails, Sails оценява конвенцията по отношение на конфигурацията, осигурява генератори и скелета за бързо изграждане на REST API от чертежи и използва модел на проектиране на MVC / активен запис. Sails е изграден върху Express и използва Waterline за ORM, с поддръжка за ORM присъединяване. Waterline поддържа бази данни както на SQL, така и на NoSQL.

Sails е back-end рамка, проектирана да бъде съвместима с която и да е уеб фреймворк среда, като Angular или Backbone, или мобилно устройство, като iOS или Android, което харесвате или трябва да поддържате. В произведенията на Sails.js има една книга, все още само частично завършена.

HTML5 / JavaScript рамки

Традиционно мислим за JavaScript библиотеките и рамките като работещи в браузърите. Както споменах по-рано, някои от тях - jQuery, Dojo и MooTools - възникнаха в средата на 2000-те предимно, за да направят Dynamic HTML и Ajax по-лесни за писане. Оттогава някои от тях са разширени в допълнителни области на функционалност, като джаджи на потребителския интерфейс и интерфейси на мобилни устройства.

Други се появяват по-скоро. AngularJS е интерфейсна структура, която разширява HTML с маркиране за динамични изгледи и свързване на данни. Backbone.js и Ember са предназначени за разработване на уеб страници с една страница. React е за изграждане на потребителски интерфейс или изглед, обикновено за приложения на една страница.

Други рамки преследват по-тесни области на специализация. D3 прави визуализация на данни и анимации. Socket.IO изпълнява уеб приложения в реално време. Knockout е начин на високо ниво за свързване на модел на данни с уеб потребителски интерфейс. Polymer предлага лек слой "захариране" върху API на уеб компонентите, за да помогне при изграждането на вашите собствени уеб компоненти. Underscore е библиотека с общо предназначение.

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

Ъглов JS.  AngularJS (или просто Angular, сред приятели) е модел на Ajax JavaScript (MVW), който разширява HTML с маркиране за динамични изгледи и свързване на данни. Angular е особено добър за разработване на уеб страници с една страница и свързване на HTML форми с модели и JavaScript контролери.

Странно звучащият модел-изглед-какъвто и да е модел е опит да се включат моделът-изглед-контролер, модел-изглед-изгледмодел (MVVM) и модели-изглед-презентатор (MVP) под едно име. Докато програмистите обичат да спорят за разликите между тези три тясно свързани модела, разработчиците на Angular решиха да се откажат от дискусията.

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

Angular е създаден от Google и с отворен код под лиценза MIT. Хранилището на GitHub има повече от 47 000 звезди и 22 000 вилици. Изработено с Angular показва стотици уебсайтове, изградени с Angular, много от които високопрофилни уеб свойства.