Web-термінологія нотатки

WARNING! Стаття довжелезна, суцільне полотно тексту без картинок. Радимо обов’язково, наскільки би складно не було — уважно дочитати її до кінця, якщо Ви початківець програміст чи тестер, і не знаєте у якому напрямі рухатися до омріяної кар’єри. Із багатьма термінами згаданими тут можливо буде тісно переплетена Ваша доля.

    Галузь ІТ із кожним днем стає все популярнішою. Кількість вакансій невпинно зростає, а разом з тим відкриваються нові можливості для опанування професії програміста чи тестувальника — навіть для новачків!

     В даній статті я спробую обмежено дати Вам загальне уявлення про предмет веб-розробки. Про те, якою вона буває. З якими мовами, технологіями та засобами слід бути хоча би поверхнево знайомим — кожному зайнятому у ІТ.

    Веб-розробка — сьогодні ДУЖЕ широка галузь. Вона охоплює декілька кваліфікаційних навичок, які можна розподілити за трьома основними групами – фронтенд (front end) розробка, бекенд(back end) і фуллстек(full stack). Чим вони відрізняються?

Що таке Front-End розробка?

    Це розробка інтерфейсу взаємодії між користувачем і основною програмно-апаратною частиною веб-додатку.

В її основі лежать три складові: HTML, CSS та JavaScript.

Розглянемо їх детальніше:

HTML

    Мова розмітки HyperText або HTML — це ключовий структурний компонент усіх веб-сайтів в Інтернеті. Без цього веб-сторінки не можуть існувати. Кожен сайт, який відвідуєте, побудований за допомогою HTML, ця мова визначає всю структуру та зміст сторінки. Щоби Ви уявили собі краще — це скелет сайту, кісточки. HTML5 — поточна ітерація HTML в Інтернеті, хоча сайти, побудовані за допомогою старих версій, все ще працюють у сучасних браузерах.

CSS

    CSS (каскадні таблиці стилів) керує тим, як HTML виглядає на сторінці. CSS встановлює кольори, шрифти, фонові зображення та навіть спосіб розгортання сторінки (Ви можете використовувати CSS для власного упорядкування елементів HTML на сторінці, навіть якщо воно відрізняється від порядку, за яким ці елементи розташовані в HTML файлі). CSS3 — це остання версія, що надає безліч функцій (можливість додавати інтерактивні елементи та анімації).

JavaScript

     Простий веб-сайт можна створити лише засобами HTML та CSS. Для чого ж потрібен  JavaScript?

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

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

    Наскільки популярною? JavaScript найпоширеніша мова програмування у світі! Тому незалежно від Ваших планів розвитку кар’єри у айті, будь-де де бажаєте (Codeacademy, codeshcool, CodeCamp чи ін. навчальних он-лайн сервісах) базовий курс просто необхідно пройти!

    Згадуючи про  JS в контексті фронтенду не можна оминути найпопулярнішу бібліотеку — jQuery. Вона дозволяє набагато простіше переміщатися HTML елементами, управляти анімацією, обробляти події, працювати з Ajax запитами і т.д.

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

    Нещодавно лише кілька років тому, JS вийшов на рівень серверної мови програмування у якості Node.js. Зростання популярності у цьому напрямі теж відбулося МЕГА стрімко.

Бібліотеки, фреймворки та CMS

    Увага! Суто теоретичні дані! Якщо Ви вже знайомі з цими поняттями, сміливо переходьте до наступного розділу.

    Перш ніж переходити від фронтенд до бекенд розробки, важливо засвоїти поняття фреймворку, бібліотеки та CMS і зрозуміти, для чого вони потрібні.

    Бібліотека — це сукупність підпрограм, методів чи об’єктів, що можуть використовуватися у розробці програмного забезпечення. Зазвичай складові бібліотеки мають пов’язаний функціонал, як-от графічна візуалізація даних на сторінці або розробка адаптивних інтерфейсів, і набір інструментів для його реалізації. Бібліотеки на сайт здебільшого додаються двома способами: в проект сайту додається файл із завантаженою бібліотекою або шляхом CDN(Content Delivery Network) — це коли бібліотека підвантажується зі стороннього серверу по ссилці.

    Фреймворк — це таке програмне забезпечення, по-суті схоже чимось на велику бібліотеку, що полегшує розробку та об’єднання різних компонентів великого програмного проекту.  Але фреймворк відрізняється від бібліотеки тим, що бібліотека не впливає на архітектуру основного програмного продукту і не накладає на нього ніяких обмежень.  Фреймворк може включати в себе допоміжні програми, коди бібліотеки, сценарії мови та інше ПЗ, що значно полегшує розробку об’єднання різних компонентів великого програмного проекту і робить HTML більш гнучкішим.

    CMS(Content Management System) — це програмне забезпечення для керування вмістом сайту. Основна функція CMS — відображати сторінки сайту користувачам, формуючи їх вміст “на льоту” з попередньо визначених шаблонів з дизайном та контентом (різноманітними матеріалами, які зберігаються в базі даних). Інша функція — допомогти власникові сайту без яких-небудь спеціальних навичок керувати сайтом, тобто публікувати нові сторінки, новини, викладати відео, робити посилання на зовнішні ресурси і так далі. Серед CMS особливо популярні конструктори сайтів (simplesite, wix, tilda ets)дозволяють будь-якому користувачу зробити власний сайт узагалі не знаючи програмування методом drug-n-drop.

    Не менш популярні у звичайних користувачів CRM(Customer Relationship Management) — але вони навідміну від CMS  призначені для більш тіснішої взаємодії із замовником, клієнтами. CRM спрямовані на автоматизацію, спрощення, пришвидшення процесів між ними. Наприклад, це програми бухгалтерського обліку, складські програми, програми оптимізації маркетингу тощо.

Що таке Back-End розробка?

    Бекенд — це те, що відбувається “за лаштунками”, тобто на серверній стороні веб-додатку. Фронтенд і бекенд можна уявити… як величезний айсберг. Все, що бачить користувач — лише його верхівка, зовнішня оболонка сайту, тобто  фронтент. Натомість найважливіший і наймасивніший елемент цього айсбергу, а саме бекенд, кінцевому користувачеві зорово недоступний, але при цьому він забезпечує функціонування усього сайту.

    Бекенд працює на сервері, тому часто його ще називають серверною частиною/стороною.

    На відміну від фронт-розробки (яка в першу чергу використовує HTML, CSS і JavaScript), у бекенді може використовуватися більш широкий спектр мов та інструментів.

Мови та інструменти:

    Ось деякі з популярних мов бекенд-розробки (а також найпопулярніші фреймворки та CMS, що використовуються в сукупності з ними):

Мова

Фреймворки

CMS

Python

Django, Flask, Pyramid, Turbogears, Twisted, Zope, web2py, Pylons

Django-CMS, Plone, Skeletonz

Ruby

Ruby on Rails, Rack, Sinatra, Cramp, Cuba

Radiant, Adva, Casein, Browser, Refinery

PHP

Symphony, Zend, Laravel, CodeIgniter, Yii, Phalcon

WordPress, Drupal, Joomla, Modx, SilverStripe, CakePHP, Concrete5, PHP Fusion

C#

ASP.Net, Nancy, FubuMVC

DotNetNuke, Orchard, Kentico, Umbraco, mojoPortal

Java

Spring, Stripes, Struts2, Hibernate, JSF, Grails

Alfresco, Magnolia, LogicalDOC , OpenCMS, Pulse, Asbru

Javascript

Node.js, Angular, React, Vue 2.0, Ember, Meteor

KeysoneJS, PencilBlue, Cody

Бібліотеки перелічувати сенсу немає, адже їх існує просто безмежна кількість.

Бази даних:

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

Примітка:

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

Умовно бази даних можна поділяти на 2 типи – SQL і NoSQL або реляційні та нереляційні.  Відмінності між ними полягають в тому, як вони спроектовані, які типи даних підтримують, як зберігають інформацію.

    Реляційні БД зберігають структуровані дані, які зазвичай представляють об’єкти реального світу. Скажімо, це може бути інформація про користувача, товари в магазині або новини на сайті, яка групується в таблиці, формат яких заданий на етапі проектування БД.

Список найвідоміших  SQL баз даних:

  • MySql
  • PostgreSQL
  • Oracle
  • SQLite
  • IBM DB2

Нереляційні БД побудовані інакше. Наприклад, документо-орієнтовані бази зберігають інформацію у вигляді ієрархічних структур даних. Ті дані, які в реляційній БД будуть розбиті на кілька взаємозв’язаних таблиць, в нереляційній можуть зберігатися у вигляді однієї сутності.

Список найвідоміших  NoSQL баз даних:

  • MongoDB
  • Apache Cassandra
  • Redis
  • Datastax

    Як правило, певні стеки технологій вимагають використання певної бази даних. Наприклад, для повноцінної структури MEAN (MongoDB, Express.js, Angular.js, Node.js) очевидно не обійтися без MongoDB. LAMP (Linux, Apache, MySQL, PHP) — відповідно MySQL.

    Окрім знання базової мови, її інструментів та технології, а також  баз даних, бекенд-розробники також повинні мати розуміння архітектури сервера. Правильне налаштування серверу дозволяє уникнути помилок під час роботи і забезпечити швидку безперебійну роботу веб-ресурсу.

Що таке Full Stack?

    Так, Ви це здогадалися: фулстек — це поєднання фронтенду і бекенду. Такого розробника можна назвати “майстром на всі руки”, він несе відповідальність за всі частини програмного продукту.

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

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

Що з переліченого необхідно знати і розуміти майбутньому тестеру?

    Відповідь очікувана: ВСЕ! Звісно, це не означає, що тестувальник (а особливо junior qa-engineer чи manual tester) має досконало знати абсолютно кожен з перелічених вище інструментів і вміти застосовувати їх на практиці. Повторюємо! Мати базові знання певного стеку технологій, що використовується тією чи іншою компанією на якій працюєте, необхідно.

Якщо ж говорити про додаткові інструменти, знання яких теоретично знадобляться в роботі — це:

  • репозиторії коду (GitHub, Bitbucket, GitLab, Beanstalk)
  • операційні системи (Linux, Windows, Mac OS)
  • системи управління проектами (Redmine, Devprom)
  • збірники проектів(Gulp, Buildout)

    Отже, відповідь на питання: “З чого ж почати?”у Вас уже є.  Хотілось би ще раз наголосити на тому, що інструменти, описані в даній статті, не мастхев для тестувальника будь-якого рівня Junior qa-engineer, Middle qa-engineer, Senior qa-engineer (і навіть для розробника). Це те, з чим Ви можете бути знайомі поверхнево і теоретично, щоб мати загальне уявлення, про що ж йде мова, а коли потрібно погугливши добряче  використати на практиці, або правильно протестувати.

    Обирайте методом проб, те що Вам більше до вподоби! Глибоко вдихніть, видихніть, закочуйте рукави  і починайте вивчення! Сили, натхнення та удачі!

Related posts

Leave a Comment

Цей сайт використовує Akismet для зменшення спаму. Дізнайтеся, як обробляються ваші дані коментарів.