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


Наличие большого выбора — хорошо, но не всегда помогает продуктивности. Разработчики ценны, в первую очередь, умением писать полезный для бизнеса код. Проблема в том, что код — это лишь часть приложения. Коду сопутствует инфраструктура множества других инструментов, помогающих разработчику производить этот код.




Create React App


Опережая заявленный график, Даня Абрамов объявил о публичном релизе Create React App инструмента для командной строки, который упрощает создание и дальнейшую разработку приложений на базе React.


Философию этого инструмента можно подытожить тремя пунктами:


  • минимизация числа зависимостей
  • отсутствие конфигурации
  • отсутствие привязки пользователя к инструменту и возможность доработки предложенного решения

С основными идеями и описанием функциональности вы можете ознакомиться в официальном блог-посте Create Apps with No Configuration


Create Elm App


Вдохновившись идеями, вложенными в Create React App, я решил поддержать эту тенденцию и минимизировать необходимость в изучении инфраструктуры для людей, которым интересен Elm. Также Create Elm App идеально подходит для быстрого прототипирования.


Руководство


Установка


Для установки вам понадобится Node.js 4.# и NPM 3.#


npm install -g create-elm-app

Создание приложения


Для создания приложения следует выполнить следующую команду в командной строке:


create-elm-app my-app

Подождите несколько секунд, пока elm-package установит необходимые пакеты, и приложение готово к разработке!


image

Новое приложение предлагает минималистичную структуру файлов и папок, готовую к разработке:


my-app/
  .gitignore
  README.md
  elm-package.json
  src/
    favicon.ico
    index.html
    index.js
    main.css
    Main.elm

Сборка


Оптимизированную сборку для размещения приложения на сервере можно совершить, выполнив команду elm-app build в корневой папке проекта:


cd my-app/
elm-app build

Разработка


Для выполнения приложения во время разработки используется сервер, размещенный по адресу http://localhost:3000/


elm-app start

image

Он позволяет использовать технологию Hot Module Replacement для динамической подгрузки измененного кода без обновления страницы.


Установка Elm пакетов


Тут уже размещено около полутысячи модулей для различных задач. Установка модулей при помощи Create Elm App выполняется следующим образом:


elm-app package install evancz/elm-http -y

Отсутствие привязки


В любой момент времени вы можете извлечь всю скрытую от пользователя конфигурацию и продолжить разработку приложения без Create Elm App.


elm-app eject

Эта команда скопирует необходимую конфигурацию и NPM модули для сборки и разработки, открывая возможности для более тонкой настройки.




Надеюсь, вы найдете этот инструмент полезным! Буду рад отзывам и пожеланиям

Поделиться с друзьями
-->

Комментарии (6)


  1. vittore
    20.09.2016 02:10

    Пошел пробовать


    Сразу бросилось в глаза


    npm WARN deprecated tough-cookie@2.2.2: ReDoS vulnerability parsing Set-Cookie https://nodesecurity.io/advisories/130


    1. vittore
      20.09.2016 02:17
      -3

      hot reload работает, единственное что мне не очень нравится в elm, при ошибке компиляции ошибки видны только в консоли браузера и консоли где запущен elm-app start / elm-reactor. Можно как-то выводить ошибки прямо в ДОМ?


      1. bustEXZ
        20.09.2016 08:37

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


        1. vittore
          20.09.2016 11:26
          +1

          Если используется хот-релоад, скорее всего экран будет поделен на две части: слева — сорцы, справа — браузер. Когда произошла ошибка компиляции, то браузер сейчас покажет белый экран. Даже если у вас в браузере открыта снизу консоль, показать ошибку в разметке красиво проще.


  1. AndreyRubankov
    20.09.2016 09:13
    +1

    Следующим шагом должен быть репозиторий шаблонных проектов.

    Запускаешь команду create-elm-app my-webapp --blueprint:full-stack-webapp и получаешь уже готовый шаблон проекта для фулл-стек разработки, который можно сразу же запустить и попробовать на деле.


    1. vittore
      20.09.2016 11:28
      +1

      На github сразу же предложили два основных шаблона, на основе Html.App.beginnerProgram и на основе Html.App.program