Етапи при Front-End разработването

Естествено всеки различно си избира и разпределя методология на изграждане, инструментите, технологиите, реда в който осъществява основните стъпки при разработка, въпреки това има някои моменти без които front-end workflow-а не минава. Изборът зависи от навиците, познанията, изискванията на клиента, спецификите на проекта, синхрона и комуникацията в екипа, мениджмънта, резонансът в етера… Ще се опитам да систематизирам опита си, със сигурност ще изпусна нещо, така че който смята, че има какво да добави в коментарите ще е от полза.

Планиране

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

Този етап е също моментът в който се сетъпва средата – файлова структура, git репо, библиотеки и зависимости, инструменти и инсталации както и синхрон между всички участници. Опита ми подсказва, че последната стъпка често се подценява поради липса на време и/или мотивация.

Този е и етапът, в който ако няма предварително дефинирани изисквания от клиента, е добре да се избере между няколко основни технологии за:

Всеки един от етапите може да се автоматизира – освен че това е по-добрият вариант е и по-бързият. Node Package Manager, Bundlr и Bower (а защо не и Yeoman) вършат чудесна работа за dependency мениджмънт. С тях могат директно да се свалят нужните библиотеки и зависимости (jquery, singularitygs, jshint …) без да се налага да се ходи до всеки един сайт поотделно да се сваля архив, да се разархвира, да се подрежда на съответното място и тн.

Dependancy managers

Разработване

Както в планирането, така и в разработването, последните няколко години се появиха много инструменти, които улесняват и ускоряват процеса на писане и поемат значителна част от задачите, които до преди няколко години се правеха ръчно. С добавянето на няколко автоматизатора (tesk-runner-a) може да си създадете среда, при която след save команда в редактора, кода автоматично да се компилира от sass/scss в css, след което се минифицира, след което се обфускира ако е нужно, след което се качва на ftp/git, след което автоматично се рефрешва браузъра. И всичко се случва само с едно Save на редактора.

Ако подобни автоматизации ви се струват добра идея, а то би трябвало да е така, Grunt и Gulp са нужните инструменти – и двата са безплатни и към двата може да добавите плъгини за каквото се сетите. Моите предпочитания са за Gulp. Плъгини за Grunt са тук, за Gulp са тук.

Gulp and Grunt

Ако предпочитате цветничък интерфейс (GUI) пред терминала (CLI) погледнете Codekit и Prepros. И двете са платени за използване на пълнат аим функционалност. Codekit е само за OSX, докато Prepros има версии за win, OSX и Linux.

Тестване

От една страна тестването се свързва с четимостта и правилното форматиране на кода. За тази цел могат да се използват инструменти като SCSSLint, JSHint, JSLint. От друга страна кода може да се тества с предварително написани тестове от същия разработчик на Jasmine. Jasmine е framework, изискващ Javascript познания с който можеш да си напишеш тестове за кода си.

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

Повечето тестови инструменти също могат да се подкарат през Grunt и Gulp.

Интeграция и оптимизация

Интеграцията е процесът при който кода на всички девелопъри се сглобява в едно репо. Обикновено този процес е осеян с много капани – за да сме сигурни, че всичко при сглобяването на кода е наред можем да ползваме Continuous Integration (CI).

Оптимизацията е свързана с:

  • оптимизиране на изображенията, ако се налага и промяна на формата на файловете с цел по-малък размер и по-нисък loading time.
  • оптимизиране на кода, което може да включва минифициране, обфускиране…
  • файлова структура и подредба на папки за качване на production сървъра.

…и всичко останало необходимо за deployment на проекта.

Deployment

Това е процесът при който проектът става публичен. Добре е преди този момент всички бъгчета и проблемчета да са изчистени, тъй като тук вече издънките стават видими за всички. Както останалите етапи така и този може да се автоматизира.

За разлика от старият начин при който ръчно се ъплоудват всички файлове на ftp има и по-модерни и автоматизирани начини за това. Един от тях е с Grunt, SSH и Git.

Нещо като извод

Да се дефинира перфектният workflow е задача с повече от едно решение от гледна точка на непрекъснатата промяна и развитие на технологиите. Въпреки това си мисля, че подобна периодична систематизация изчиства макропогледа върху FE разработването и улеснява избора на технологии и инструменти. Като цяло винаги ще има какво да се добави или изключи от подобен списък.
А ти какво би добавил?

 

Коментари през Facebook

1 Comment
  • Stoyan
    August 13, 2015

    Stylus кърти най много

Остави коментар

Your email address will not be published. Required fields are marked *