15
3.2018
3.2018
Під терміном frontend часто розуміють інтерфейс програмного продукту. Зазвичай, інтерфейс це те, що бачить користувач. Інтерфейс дозволяє користувачу отримувати інформацію і керувати програмним продуктом. Для прикладу, якщо ми говоримо про веб-сайт, то frontend це сторінки. Користувачі переглядають їх, а також взаємодіють з ними – наприклад, клікають лінки, проскролюють, натискають кнопки, здійснюють вибір зі списків, тощо. Отримані від користувача команди передаються для виконання на сервер (backend) або обробляються і виконуються безпосередньо на комп’ютері користувача. Детальніше про дизайн взаємодії з користувачем.
Загалом поділ на фрон- та бекенд все більше розмивається. Якщо раніше у веб-проектах комп’ютер користувача через свою невелику обчислювальну потужність був у ролі «телевізора з клавіатурою», і більшість команд користувача виконувалися на стороні потужного сервера, то з часом, коли потужність процесорів на клієнтському боці суттєво виросла, стало логічно обробляти значну частину операцій на клієнтській стороні.
Одним з трендів розвитку frontend є так звані одно сторінкові програми (single page application, SPA). Прикладом таких програм є інтерфейси Gmail, Dropbox, OneDrive. Всі ці програми працюють в межах однієї сторінки, не перезавантажуючи її і не переходячи на інші сторінки. Цим вони дуже подібні на «рідні» (native) програми для операційної системи.
До frontend технологій у веб-розробці відносять HTML, CSS, JavaScript, – це ті мови та технології, що виконуються безпосередньо браузерами користувача.
Якісний frontend достатньо складна задача. Хороший інтерфейс користувача народжується на стику багатьох технологій та підходів. Це естетичний дизайн побудований на вподобаннях ЦА та комунікації з відвідувачами (call to action), продуманий інтерфейс користувача та розуміння специфіки взаємодії з програмним продуктом UI/UX, а також власне програмування представлення та функціоналу які мають працювати досить швидко, не перевантажувати ні браузер, ні канал і, звичайно, не видавати помилок.