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

Така че, защо Ractive.js ?

За разлика от други инструменти, които генерират инертен HTML, Ractive трансформира шаблоните в чертежи за приложения, които са интерактивен по подразбиране. И макар че със сигурност може да се твърди, че приносът на Ractive е по-скоро еволюционен, отколкото революционен, въпреки това стойността му е значителна.

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

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

Какво е Ractive.js?

Ractive първоначално е създаден, за да се справи с проблема със свързването на данни по по-елегантен начин. За тази цел са необходими шаблони и ги трансформира в олекотено виртуално представяне на DOM, така че когато данните се променят, реалният DOM се актуализира интелигентно и ефективно.

Но скоро стана ясно, че подходът и инфраструктурата, използвани от Ractive, могат да бъдат използвани и за други неща по-ефективно. Например може автоматично да се грижи за неща като повторно използване на манипулаторите на събития и автоматично да ги развързва, когато вече не са необходими. Делегирането на събитие става ненужно. Както при обвързването на данни, този подход предотвратява кода да стане тромав с нарастването на приложението.

Ключови функции като двупосочно свързване, анимации и поддръжка на SVG се предоставят незабавно, а персонализираната функционалност може лесно да се добави чрез приставки.

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

Нашата примерна ап

Нашето примерно приложение ще бъде използвано за търсене в База данни на разработчиците ApeeScape въз основа на умения. Нашето приложение ще има два изгледа:

• Търсене: списък с умения с вградено поле за търсене
• Резултати: изглед на уменията, включително списък с разработчици

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

(Забележка: Връзките към онлайн работещ екземпляр на приложението и хранилището на изходния код са предоставени в края на тази статия.)

За да запазим основния си фокус върху рамката Ractive, ще използваме редица опростявания, които обикновено трябва не да се направи в производството:

• Тема по подразбиране. Ще използваме Bootstrap с тема по подразбиране за стилизиране, вместо да персонализираме темата, за да отговаря на стила на приложението ви.
• Зависимости. Ще добавим нашите зависимости като отделни скриптове, които дефинират глобални променливи (вместо да използваме модули ES6, или CommonJS, или AMD с подходящ товарач за разработка и стъпка за изграждане за производство).
• Статични данни. Ще използваме статични данни, които подготвих, като изстъргвам публичните страници на сайта ApeeScape.
• Няма маршрутизация от страна на клиента. Това означава, че URL адресът ще остане същият, докато превключваме между изгледите. Определено не бива да правите това за SPAs, въпреки че може да е добре за някои малки интерактивни компоненти. Ractive няма вградена реализация на рутер, но може да се използва с рутери на трети страни, както е показано в този пример .
• Шаблони, дефинирани в скрипт таговете в HTML. Това не е непременно лоша идея, особено за малки приложения, и има някои предимства (просто е и можете да обработвате тези клиентски шаблони заедно със своите сървърни шаблони, например за интернационализация). Но за по-големи приложения можете да се възползвате от предварително компилиране (известен още като, предварително анализиране шаблони към вътрешно JS представяне.

Нека започнем с уеб приложенията

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

Нека започнем, като създадем папка с два файла вътре: index.html и script.js. Нашето приложение ще бъде изключително просто и ще работи от file:// протокол, за да избегнете необходимостта от стартиране на сървъра за разработка (въпреки че можете, ако желаете).

Страницата за търсене

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

HTML скелет

Нека започнем с тази тривиална HTML страница:

Търсене на ApeeScape Зареждане ...

И така, каква е магията тук? Всъщност е доста просто. Добавих малко съдържание (това е анимирана лента за напредък на Bootstrap, но може да е анимиран GIF или каквото и да е друго) направо към нашия основен елемент. Мисля, че е доста умно - докато нашите скриптове се зареждат, потребителят вижда индикатора за зареждане (тъй като няма никаква зависимост от JavaScript, той може да се покаже веднага). Веднага след като приложението Ractive бъде инициализирано, Ractive ще замени съдържанието на основния елемент (и по този начин ще изтрие анимацията за предварително зареждане) с изобразения шаблон. По този начин ние сме в състояние да постигнем този ефект само парче статичен HTML и 0 логически реда. Мисля, че това е доста готино.

Заключение

Помислете какво сме постигнали тук и колко лесно сме го постигнали. Разполагаме с доста изчерпателно приложение: показва списък с умения, позволява бързо търсене в тях (и дори поддържа интерактивно актуализиране на списъка с умения, докато потребителите вписват в полето за търсене), позволява навигация до определено умение и обратно и списъци разработчиците за всяко избрано умение. Освен това можем да кликнете върху всяко умение, изброено от всеки разработчик, за да ни отведе до списъка с разработчици с това умение. И всичко това с по-малко от 80 реда HTML и по-малко от 40 реда JavaScript. Според мен това е доста впечатляващо и говори много за мощта, елегантността и простотата на Ractive.

Работещата версия на приложението е достъпна онлайн тук и пълният изходен код е публичен и достъпен тук .

Разбира се, в тази статия едва сме надраскали повърхността на възможното с рамката Ractive. Ако ви харесва това, което сте виждали досега, силно ви препоръчвам да започнете 60 секунди настройка на Ractive и започнете да изследвате сами всичко, което Ractive може да предложи.