Гід для новачків за вибором javascript фреймворка
Давайте докладніше розберемо ці потужні фреймворки, які допоможуть реалізувати поставлену задачу.
Існує багато опцій при виборі фреймворка, далі список найбільш популярних на сьогоднішній день: Vue, React, Angular і Ember. Кожен з них був обраний відповідно до зростання спільноти, стабільності, активності на Github, тимчасовому проміжку при якому технологія була доступна розробникам, а також грунтуючись на тому, використовується-ли технологія великою кількістю компаній і розробників.
Vue - прогресивний, доступний фреймворк, в той же час багатофункціональний і продуктивний. Якщо вам знайомі основи старого доброго HTML, CSS, JS ви зможете з легкістю освоїти Vue.
"Ядро бібліотеки створено тільки для роботи з логікою представлення (view), і його легко інтегрувати з іншими бібліотеками та проектами. З іншого боку, Vue відмінно підійде для створення складних односторінкових додатків (SPA) коли використовується з сучасними інструментами та бібліотеками. "- вступ до документації по VueJS
Нижче ми можемо побачити приклад синтаксису простого "Hello World":
Більш цікавий приклад з використанням значень атрибутів ( "attribute values") в розмітці:
Vue.js дозволяє вам обробляти дані вводяться користувачів, створювати компоненти-шаблони (component templates). прив'язувати дані до структури DOM з умовами і циклами, а також декларативне відображення ( "declarative rendering"), з простим синтаксисом, засноване на специфікації веб-компонентів.
Давайте розберемо приклад синтаксису прямо з вступного туторіал документації React. Цей приклад демонструє створення так званого "Component subclasses", також є і інші типи компонентів. Як ви напевно могли помітити, синтаксис схожий на XML:
Ресурси для навчання:
Angular розроблений командою Google. Так як HTML ніколи не замислювався, як динамічний мову, Angular розширює HTML додаючи набір атрибутів, здатних динамічно видозмінювати розмітку. У підсумку це дозволяє робити декларативне прив'язування ( "declarative bindings") до подій, для відображення динамічних даних і станів заснованих на взаємодії користувача. Ви можете зіткнутися зі значними вимогами до даних при побудові моделей даних використовуючи RxJS. Immutable.js або будь-яку іншу технологію Push-модель. І ви можете розширити мову шаблонів своїми компонентами або використовувати широкий вибір існуючих компонентів.
"Навчіться створювати додатки на Angular і повторно використовувати ваш код і можливості для побудови додатків для будь-яких кінцевих цілей. Будь-то веб, мобільний веб, нативний веб або десктопні прілоежнія. "
Синтаксис Angular не представляє з себе нічого нового, це все ті ж HTML атрибути, а також Mustache-esque плейсхолдери, за винятком того, що до атрибуту додається простір імен ng-. все це можна побачити в прикладі нижче:
Angular також побудований з компонентів, що є комбінацією HTML шаблонів і класів компонентів, які контролюють частину екрану.
Ember створений на Node і використовується безліч Node.js модулів для роботи. Також Ember має інтерфейс командного рядка (його можна встановити через npm), що надає загальну структуру проекту і набір інструментів для розробки включаючи систему доповнень. Крім цього з ним йде сервер для розробки, а також спеціальні прапори для середовища побудови проекту, які можуть бути передані через командний рядок.
Приклад вище простий приклад синтаксису і файлової структури. Даний код експортує і розширить Ember контролер і скомпілює імена з об'єкта в вашу розмітку.
висновок
Вибір фреймворка залежить від персональних переваг і впевненості в тому, що він підійде для тривалої роботи над вашим проектом. Якщо ви хочете глибше пізнати і порівняти фреймворки, на сайті Vue є докладний порівняння. також включають інформацію про інших бібліотеках, таких як Knockout, Polymer і Riot. Крім цього ви можете пройти наш тест, створений для того, щоб допомогти визначитися з вибором.
