Как Выбрать Фреймворк Для Фронтенд-Разработки

Предлагаю вашему вниманию перевод статьи Как выбрать интерфейсную веб-платформу с сайта top.fse.guru. Привет, дружище! Ниже вы найдете большой список макетов инструментов и фреймворков.

Не волнуйся! Вы можете выбрать тот, в котором абсолютно уверены, или проигнорировать все и придумать свою версию.

Эта статья призвана помочь вам изучить и систематизировать список инструментов, которые используются в сфере фронтенд-разработки.

А еще, это хороший список, из которого вы можете выбрать то, что вам по душе.

Использую ли я это сам? Да, я использую это как напоминалку с разными настройками, которые могут мне пригодиться.

Кроме того, сюда я направляю людей, которые спрашивают меня: «Что мне следует использовать для разработкиЭ» Потому что, как известно, идеального варианта не существует, но есть возможность упростить свой выбор.

А еще, я часто переписываю эту статью, потому что узнаю что-то новое и меняю свое мнение о старом.

(А потому, что пока вы читали эту статью, было скомпилировано и выпущено 37 новых библиотек).



Когда начать?

Если у вас большой и в перспективе долгосрочный проект, вам понадобится: 1. Модульная структура проекта.

Лично я предпочитаю модульную архитектуру.

И многие фреймворки предоставляют мне это.

Но в крайнем случае можно использовать БОТ , Вяз Архитектура , переосмыслить И ЦиклJS .

2. Загрузчик модулей/Бандлер ( ТребоватьJS , Просматривать , Веб-пакет , КомпонентJS , СистемаJS ).

Эти вещи помогут сделать ваш код простым для чтения и обслуживания.

3. Менеджер пакетов ( НПМ , jspm , беседка ).

Лично я предпочитаю npm другим, потому что де-факто это стандарт в мире JS и разработчиков узлов.

А еще, я думаю, что беседка - это кривая подделка.

Я верю, что со временем он вымрет, и это хорошо.

Он не так силен в управлении компонентами и зависимостями, как npm. Ваше мнение может отличаться.

4. Автоматизация сборки и компиляции ( ворчать / глоток / брокколи ).

Потому что жизнь слишком коротка, чтобы делать это снова, и снова, и снова.

5. Препроцессоры CSS ( jss / стилус / дерзкий / css-модули ) и -постпроцессоры ( csso / автопрефиксер / постcss ).

Эти инструменты сделают ваш CSS немного лучше и устранят некоторые проблемы с кроссбраузерностью.

Да, я знаю.

2016. Но всё равно, Этот все еще заноза в заднице.

6. Фреймворки разметки/UI ( Бутстрап , Фонд Зурба , Элементальный интерфейс , Материал Лайт ).

Эти вещи несут в себе тонны знаний и 1000 лет страданий веб-разработчиков.

Они помогут вам освоить базовую разметку и стилизацию.

Однако, если вы считаете, что вы герой разметки и эксперт по интерфейсу или вашей компании нужен ваш собственный стиль, вы можете создать свой собственный решение .

В этом случае я предлагаю вам выбрать методологию ( БЭМ , ООССС ), что сэкономит ваше время.

Лично я предпочитаю схему именования из БЭМ и свой собственный (индивидуальный) рабочий процесс.

Вы можете найти пару мыслей по этому поводу в руководстве по стилю для Брэйнли.

com , который я помогал собирать.

Если вы не знаете, с чего начать разработку собственных методов, возможно, вам стоит посмотреть Шаблон HTML5 .

7. Запуск тестов ( жасмин , карма , мокко , лента , стажер ).

Все требует проверки.

Без исключений.

8. Инструменты для обеспечения качества кода ( эслинт , хаски , конфигурация редактора ).

Вы же не хотите превратить свой код в дамп, не так ли? 9. Сообщества, где можно получить помощь ( чаты , IRC, митапы, твиттер).

Вы не живете в бункере (не так ли?).

Люди могут знать.

И вообще, им нравится помогать другим.



Хорошо, что дальше?

Вот ряд важных вопросов, на которые необходимо ответить, прежде чем приступить к разработке и решению стоящих задач.

Вы готовы? 1. Нужно ли работать над проектом в команде? Кто они и чего они хотят? Этот ответ поможет вам выбрать язык И подход (рабочий процесс) , полезно для вас и вашей компании.

2. На что лучше ориентироваться: качество, скорость, удобство поддержки? Вы поймете, можно ли экспериментировать и можно ли совершать ошибки, чтобы улучшить выбор инструментов.

3. Нужно ли будет передавать проект «Третьим лицам»? Понимание этого может ограничить доступные технологии, и вам придется выбирать из того, что понравится вашей «целевой аудитории».

4. Стоит ли мне браться за основной продукт или ограничиться дочерними проектами? Если вы беретесь за основной проект, то вам следует использовать проверенные технологии и фреймворки, чтобы сэкономить свое время и нервы.

5. Является ли проект интерактивным приложением или набором статических документов? Может оказаться, что все, что вам нужно, это HTML, CSS и немного магии.

А также генератор сайтов или CMS. 6. Это один проект или группа связанных проектов? Возможно, вы захотите использовать компонентный подход и руководство по стилю, даже если ваш проект представляет собой набор статических документов, чтобы упростить рутинную работу и организовать код. А также подумайте о SEO и серверном рендеринге в этом случае.



Список языков и дополнений

Ответив на эти важные вопросы, пришло время поговорить с товарищами и выбрать язык.

Потому что есть много вещей, достойных вашего внимания, кроме этот сумасшедший яваскрипт! 1. Есть ли у вас команда JS-разработчиков? Рассмотрите возможность используя ES6 Вавилон ).

Это сделает вашу жизнь немного проще.

2. Вы предпочитаете печатные языки? Вы на языке «Вы» с типами? Посмотри на машинопись .

3. Удобен ли вам функциональное программирование? Вы можете начать с малого, с ES6 и таких библиотек, как ло-тире или Рамда .

Есть несколько хороших книги И уроки , который Вам поможет освоиться на этом пути.

4. Пробовали свои силы в функциональном JS и хотите еще больше вкусностей? Пытаться вяз .

Это просто великолепно! 5. Вы Full Stack разработчик? Пытаться клоюрескрипт .

Это не менее шикарно! 6. Вам нравится Scala? Давай попробуем весы .

7. Знаете ли вы и любите Haskell? Пытаться чистый скрипт .

Понятия не имею, насколько это круто.

8. Недостаточно безумия? Здесь список языков, которые компилируются в javascript .

Выбирайте любой и наслаждайтесь.



Список фреймворков

1. Все, что вам нужно, это простое работающее приложение? Нет времени на «фундаментальное развитие»? Твой выбор - угловой .

Немедленно начинайте искать помощь.

.

2. Ищете простоту и скорость? Есть ли время для поддержки в будущем? Выбирать угловой .

Но будьте полностью готовы .

3. Вы, бэкендеры, пытаетесь выполнять фронтенд-работу, потому что другого варианта нет? Да Да, угловой .

Начните искать фронтенд-разработчика в свою команду.

4. Нужно быстро стартовать и быстро развиваться.

с возможными предположениями? Давай попробуем амперсанд / позвоночник + библиотеки, соответствующие вашим потребностям.

5. Запросы те же, есть ли еще проекты? Добавлять марионетка / Чаплин на магистральную сеть и подумываем о переходе на ReactJs .

6. Есть ли у вас время на эксперименты с расчетом на повышение производительности в будущем? Давай попробуем мифрил / нокаутировать / аурелия с необходимыми библиотеками.

7. Хорошо ли вы разбираетесь в интерфейсах и знаете основы функционального программирования? Попробуй ReactJs + сокращение + ИммутаблеJS + библиотеки.

8. Больше навыков функционального программирования? Безумно интерактивное приложение? Добавьте реактивное программирование ( бекон , rxJS ) или попробовать Cycle.js (на свой страх и риск).

Примечание 0. В любом случае было бы неплохо заняться реактивными потоками и научить этому других.

Примечание 1. Пожалуйста, не путайте реактивные потоки с стеклопластик 9. Будет ли ваше приложение расти, команда развиваться, есть ли у вас время на обучение? Потратьте это на Эмберджс .

Поверьте, это неплохая инвестиция.

10. Должно ли приложение быть похоже на десктопное? Будут ли в нем таблицы, чаты и прочее для аналитики? Корпоративное приложение? Попробуй ExtJS .

11. Вы студия? Тогда у вас уже должен быть набор любимых инструментов.

В любом случае сосредоточьтесь на том, что вы знаете лучше всего, и используйте чаще.

12. Фрилансер? Адаптируйтесь к условиям.

Попробуйте Ангуляр.

Не страдайте.

Пусть другие страдают, если хотят. Примечание: Но вы вряд ли что-то сделаете, если клиент не захочет за это платить.

13. Пытаетесь создать привлекательный, индивидуальный продукт для других людей? Адаптируйтесь к вашим конкретным потребностям и выбирайте из списка выше.

14. Вы точно знаете, что хотите получить в результате (например, мобильное приложение с десятью экранами)? Поэкспериментируйте пару недель с ионный , известный , Сенча Тач .



Как начать программировать?

1. Просмотрите документацию по выбранным вами платформам и инструментам.

2. Спросите у более опытных людей, какой стартер лучше всего использовать для проекта.

3. Настройте свои инструменты.

4. К черту код! Но я бы все равно рекомендовал использовать инженерный подход .

5.… 6. ПРИБЫЛЬ!1

Я понятия не имею, как начать использовать рекомендованные вами фреймворки?

Посмотри на Примеры TodoMVC и найдите пример с выбранной вами структурой.

Но помните, что это всего лишь примеры и в большинстве случаев они не масштабируются по мере роста проекта

Я не могу принять решение.

Что мне делать?

Ладно, ладно, успокойся.

Если не можешь решить, возьми ЭмберJS , или если ты чувствуешь себя сильным ReactJs + Redux + ES6 + webpack + npm + jss + автопрефиксер + eslint + Elemental UI + karma. И читать Этот ! Так.

Не спрашивайте почему, просто возьмите и начните развиваться.



Слишком много упоминаний о ReactJ. Почему?

Это будущее веб-разработки.

Вот хорошая статья , что объясняет это.

А еще им пользуется огромное количество людей.

Вам обязательно стоит попробовать это в некоторых своих проектах.

Будет весело, гарантирую! Счастливого плавания! Если вам интересно и вы хотите более подробно углубиться во фронтенд-разработку, посмотрите здесь .

P.S.: Целью перевода не было уличить автора во лжи, обмане и невежестве.

Не разбавляйте своими мыслями и комментариями.

Целью перевода был перевод. Теги: #перевод #веб-разработка #разработка веб-сайтов #JavaScript #HTML

Вместе с данным постом часто просматривают: