Веб-дизайн та розробка сайтів

JavaScript вперше появився на сцені ще в 1995 році, і тоді цю мову використовували для досить простих завдань, наприклад, для реалізації форми перевірки. Сьогодні JavaScript дозріла до потужної мови, яка в поєднанні з HTML5 API відтворює відео, реалізує drag-and-drop та елемент canvas, дозволяє створювати деталізовані інтерактивні користувацькі інтерфейси для веб-сайтів.

Проте, якщо використовувати JavaScript для розробки великих проектів зі складними структурами даних і багатим інтерфейсом, то стає зрозуміло, що це не для JavaScript. Безпосередня взаємодія з DOM (об’єктна модель документа) стає невпорядкованою та нудною; JavaScript не така і багата на функції обробки даних; її об’єктна модель не така і проста; синтаксис занадто вибагливий.

Але в останні роки з’явилися великі JavaScript бібліотеки , які значно полегшують життя веб-розробника.

Отож, JavaScript бібліотеки, які вам сподобаються:

1. Фреймворк Backbone – для організації структури великих JavaScript веб-додатків
2. Бібліотека Underscore – набір функцій-утиліт, які додають функціональні можливості програмування для JavaScript
3. Knockout – хороший спосіб спрощення ваших користувацьких інтерфейсів
4. Sugar – бібліотека, яка розширює функціональність JavaScript
5. CoffeeScript – мова, яка транслюється в JavaScript і з якою дійсно приємно працювати

Коротко про кожну бібліотеку, принципи її роботи та корисні посилання на ресурси з більш детальною інформацією дальше.

Backbone.js: додайте структуру великим додаткам

При створенні простої веб-сторінки з підтримкою JavaScript не обовя’зковим є написання JavaScript коду з нуля. Можна використати існуючі сторінки, додавши атрибут id за допомогою HTML розмітки тим елементам, якими ви управлятимете, а потім вибрати необхідні елементи DOM, використавши JavaScript метод getElementById().

При розробці більш складних сторінок можна використати і таку бібліотеку, як jQuery для спрощення захоплення довільної групи елементів в DOM, маніпулювання цими елементами, організації роботи з такими подіями браузера як завантаження сторінки, кількість кліків і натиснень клавіш.

При написанні великих веб-додатків, маніпулюючи елементами DOM можна заплутатися так, що необхідно буде вручну відслідковувати всі дані додатку, зв’язувати дані з користувацьким інтерфейсом і узгоджувати умови збереження і читання даних з серверів Ajax-викликами чи використовуючи формат JSON.

В такому випадку зазвичай використовують JavaScript бібліотеку, яка може забезпечити певну структуру для даних вашого веб-додатку, користувацький інтерфейс та функціональність.
Backbone одна з таких бібліотек. Вона надає ряд інструментів, які чітко відділяють дані і функціональність вашого додатку від користувацького інтерфейсу і набагато спрощують роботу з групами даних забезпечуючи синхронізацію з веб-сервером.

Ось деякі ключові елементи Backbone:

• Models (моделі) зберігають дані вашого додатку. Зазвичай окремий об’єкт Model зберігає єдиний цілий елемент, наприклад, користувача, твіт чи пост на форумі. З використанням моделей можна легко отримувати і вводити дані, автоматично перевіряти дані, зберігати дані в базу даних на сервері і вибирати дані моделі з бази даних. За замовчуванням Backbone взаємодіє з сервером використовуючи запити RESTful JSON. Також можна легко визначити URL формат, який повинна використовувати модель для зберігання і вибірки даних з сервера.
• Collections (колекції) дають можливість управляти групами даних, які зберігаються в Models. Ви можете додавати/вилучати Models в/з Collection; повертати моделі з Collection; вказувати порядок сортування моделей в колекції; отримати всю колекцію з сервера і т.д.
• Views (представлення) контролюють те, як ваші дані відображаються на сторінці. Необхідно зв’язати представлення з елементом DOM, а потім налаштувати представлення так, щоб воно реагувало на визначенні події, наприклад, зміна значень моделі, і відповідно оновляло її DOM-елемент. Таким чином, при кожній зміні даних в додатку веб-сторінка автоматично оновлюється з врахуванням змін.
• Routers (маршрутизатори) карт клієнтських URL-адрес – клас створений за допомогою хеш-фрагментів (#pageName) чи нового History API призначений для обробки хеш навігації в додатку. Дозволяє створювати закладки на сторінках за загальними URL-адресами.

Backbone досить легкий, але має одну сильну залежність: Underscore, яку можна використати для керування колекціями і створювати HTML-шаблони, які відображають дані з використанням представлень. Можна також включити jQuery (або Zepto) для забезпечення RESTful стійкості та історії підтримки, і полегшити доступ до DOM-елементів через представлення. Backbone також непогано взаємодіє з іншою довільною бібліотекою JavaScript. Дізнатися більше про Backbone можна тут, або у підручнику.

Читати далі