Вам нужно минимизировать свой код. И связать это. Это означает, что вы также хотите сгенерировать исходные карты для отладки. И, конечно же, вы хотите запускать автоматические тесты. И просмотрите метрики покрытия кода. И напишите свой JavaScript. Не забудьте скомпилировать свой Sass и добавить CSS Post. Было бы неплохо и горячая перезагрузка. О, и не ждите, что ваша команда будет делать все это вручную. Нам нужно, чтобы все это совершенство происходило с помощью одной команды и запускалось повторно каждый раз, когда мы нажимаем «Сохранить». ‹Вставьте здесь глубокий вдох…›

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

Еще не перегружены?

Мы вступили в эру усталости от решений JavaScript.

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

Мое решение? Стартовый комплект.

Вот как работает шахта за 30 секунд:

Все, что вы видите выше, включено в React Slingshot.

Зачем нужен стартовый комплект / плита / генератор?

Стартовый комплект служит множеству целей:

  1. Он кодифицирует длинный список решений, передового опыта и извлеченных уроков.
  2. Защищает от забывания важных деталей.
  3. Это способствует последовательности.
  4. Это позволяет избежать повторения работы.
  5. Это повышает качество, потому что правильные поступки становятся автоматическими.

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

Теперь, когда у нас есть стартовый комплект, каждый раз, когда я читаю в блоге важную информацию, я обновляю наш стартовый комплект, чтобы использовать его. Больше не нужно вспоминать все подводные камни!

Отличный стартовый комплект показывает вам рабочий, реальный пример рабочего процесса. Он выражает твердые мнения об именах файлов, библиотеках компонентов, соглашениях о тестировании и процессах сборки. И он должен включать работающий пример приложения, чтобы показать, как все части соединяются вместе.

При создании React Slingshot я просмотрел бесчисленное количество примеров проектов на Github и длинный список существующих стартовых наборов. Я взял библиотеки, шаблоны и идеи, которые мне нравились больше всего, и сделал их частью своего набора.

Я считаю, что каждая команда должна делать то же самое.

Стартовые наборы JavaScript - это не только потребление. Они о вдохновении.

Мое предложение: изучите существующие стартовые комплекты для вдохновения. Раскройте свой любимый и создайте комплект, который лучше всего подходит вашей команде.

Манифест Контрольного списка

Я осознал силу стартовых наборов, читая Манифест Контрольного списка. Основная идея проста: как профессионалы мы думаем, что можем запомнить все необходимые шаги. Мы не можем.

Врачи, устанавливающие очереди к пациентам, должны выполнять длинный список задач, чтобы избежать инфекций. Ежегодно от инфекций линии умирают 1000 человек. Итак, одна больница ввела обязательные контрольные списки с потрясающими результатами:

Результаты были настолько впечатляющими, что они не были уверены, стоит ли им верить: показатель заражения линии через десять дней упал с одиннадцати процентов до нуля. Так что они наблюдали за пациентами еще пятнадцать месяцев. За весь период произошло только два заражения линии. Они подсчитали, что в этой единственной больнице контрольный список предотвратил сорок три инфекции и восемь смертей и сэкономил два миллиона долларов на расходах.

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

Итак, вот загадка I.C.U. забота: у вас есть отчаянно больной пациент, и для того, чтобы иметь шанс спасти его, вы должны убедиться, что сто семьдесят восемь ежедневных задач выполняются правильно - несмотря на то, что какой-то монитор срабатывает по бог знает по какой причине, несмотря на Пациент в соседней кровати разбился, несмотря на то, что медсестра просунула голову из-за занавески, чтобы спросить, может ли кто-нибудь помочь «открыть грудь этой даме». Так как же на самом деле справиться со всей этой сложностью?

Похоже на беспокойный день в вашей команде разработчиков? Решение - опираться на контрольные списки. Контрольные списки устанавливают более высокий стандарт базовой производительности.

Стартовый набор JavaScript - это живой, автоматизированный и интерактивный контрольный список. Он снимает умственную нагрузку, связанную с попытками запомнить все передовые методы, делая их автоматическими. Он гарантирует, что все будет сделано правильно, даже когда вы находитесь в самом разгаре. Таким образом, хорошо спроектированный стартовый комплект приносит успех. Делать правильно становится проще, чем делать неправильно. Это большая победа.

А как насчет Ember, Angular и Knockout?

Пока что ссылки, которыми я поделился, вращались вокруг React. А как насчет Ember, Angular и Knockout? Короче говоря, чем менее самоуверенны ваши инструменты, тем больше вам понадобится стартовый комплект.

Эмбер всесторонний и заведомо самоуверенный. У него уже есть мнения о файловой структуре, тестировании, CLI и многом другом. Ember - это религия. Примите все это, или вы не впишетесь. Ember - это, по сути, всеобъемлющий стартовый набор.

Для сравнения, React, Knockout и Backbone в значительной степени однозначны. Это библиотеки, которые решают очень конкретные проблемы, поэтому вы комбинируете их с другими библиотеками и шаблонами для создания настоящего приложения. Они оставляют тестирование, сборки, файловые структуры, развертывание, проверку, HTTP-вызовы и многое другое на ваше усмотрение. Поначалу это может показаться пугающим, но есть очевидное преимущество: вы можете выбрать лучшие из представленных технологий и моделей, которые вам больше всего подходят. И ваше окончательное решение не отягощено вещами, которые вам не нужны.

На этот континуум нет правильного ответа, но интересно, что Angular стал довольно популярным, заняв промежуточное положение. Он предлагает достаточно мнений, чтобы было ясно, с чего начать, но не настолько, чтобы вы чувствовали себя полностью скованным. Для Angular 2 Angular-cli де-факто превращается в стартовый комплект. Чтобы узнать больше о достоинствах Angular 2 против React, ознакомьтесь с Angular 2 против React: Там будет кровь.

Следующие шаги

Ищете вдохновение? Ознакомьтесь со Списком Эндрю Фармера из 70+ стартовых наборов React.

Хотите создать стартовый комплект React с нуля? Ознакомьтесь с Создание приложений с помощью React и Redux в ES6 на Pluralsight.

Кори Хаус является автором React и Redux в ES6, Создание приложений с помощью React и Flux, Чистый код: написание кода для людей. » И несколько других курсов по Pluralsight. Он является архитектором программного обеспечения в VinSolutions и обучает разработчиков программного обеспечения на международном уровне таким методам разработки программного обеспечения, как интерфейсная разработка и чистое кодирование. Кори - Microsoft MVP и основатель reactjsconsulting.com и outlierdeveloper.com.