Создание в Facebook, подобное в Facebook.

Автор оригинала: Rudolf Olah.

Введение

ELM – это новый язык программирования, который компилирует JavaScript. Это функциональный язык программирования, который включает в себя статический набрав, обеспечивающий безопасность типа в ваших веб-приложениях и ловить общие ошибки.

React – это библиотека для создания пользовательских интерфейсов в JavaScript. Что делает его круто, это то, насколько быстро и исполнительным является привод, благодаря своему использованию концепции виртуального DOM (модель объекта документа). Виртуальный дом позволяет внести изменения в партии до того, как они применяются к DOM.

Хотя производительность реагирования является потрясающим, в определенной точке вы заметите, что реагирование просто недостаточно. Вы также захотите установленную библиотеку потока данных redux, flux или некоторые другие данные. Вы захотите установить WebPack и Babel, чтобы вы могли использовать последние функции ES6 (также известный как EmcaScript 2016). Тогда вы, вероятно, захотите добавить проверку типа и статические типы в этот момент, поэтому вам также нужно будет установить Поток , JavaScript Type-Checker.

ELM предоставит всем вкусности, которые реагируют, Redux/flux, а поток дают вам, но как язык коллективного программирования, а не как отдельные библиотеки.

II. Что вы узнаете

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

Вы узнаете, как сделать следующее в ELM:

• Как использовать реактор ELM для компиляции и запустить программу ELM
• Как создать модуль
• Как создать вид
• Обновите HTML на основе пользовательского ввода

III. Установка ELM.

Самый быстрый способ начать работу с ELM – это установить его с помощью NPM, управляющего узла пакета.

Вы можете сделать это с этой командой:

npm install -g elm

Внутри Запуск ALM-приложений

A. elm Reactor.

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

Чтобы запустить его, сделайте это:

elm reactor

Веб-сервер будет работать на localhost: 8000 И отобразит список файлов ELM, когда вы перейдете к этому URL в веб-браузере. Когда вы нажмете файл, он будет скомпилирован из ELM в JavaScript и запустите в браузере. Это делает его быстрым для итерации через разработку компонента или целого веб-приложения.

B. elm rep, интерактивный интерфейс командной строки

Вы также можете запустить ELM в REPL, CHEED-SEVINGE-PRINT-LOOP, который также известен как интерактивный интерфейс командной строки. Вы можете быть знакомы с этим на других языках, таких как IRB Python и Ruby. Reft позволяет вам экспериментировать с языком на командной строке, набрав в различных выражениях, чтобы увидеть, что произойдет.

V. Настройка проекта

Мы будем создавать компонент коробки комментариев, используя ELM, он похож на окно комментариев, который вы видите в блогах, таких как WordPress и веб-сайты, такие как Facebook. Он покажет список комментариев по поводу статьи вместе с формой для пользователя, чтобы ввести свой собственный комментарий и отправить его.

Во-первых, давайте создадим новый каталог с именем Elm-Tustorial Отказ На командной строке, когда вы находитесь в каталоге, вам нужно будет создать проект ELM с пакетами Base Elm.

Вы можете сделать это, набрав:

elm package install

Вас спросит, хотите ли вы установить три elm-lang Пакеты (CORE, HTML и Virtual-DOM), введите «y» и нажмите Enter, чтобы установить эти пакеты. Это создаст новый файл с именем elm-package.json и каталог с именем alm-match Отказ В elm-package.json Вы увидите что-то, что выглядит как типичный NPM Package.json файл. Вы можете заполнить этот файл позже. alm-match каталог похож на node_modules каталог при использовании NPM.

VI. Создание компонента комментариев

Откройте файл Commentbox.elm Отказ Вот где мы делаем, чтобы определить наш комментарий Box Component и отобразить его пользователю.

A. Импортировка того, что нам нужно

Мы начинаем с импорта модулей и библиотек нам понадобится.

A.1. Импорт элементов HTML для рендеринга

Во-первых, это HTML-библиотека, которая используется для рендеринга элементов HTML DOM, таких как H1 (Уровень заголовка 1) и P (абзацы):

import Html exposing (..)

A.2. Импортирование атрибутов HTML

Затем мы импортируем атрибуты для элементов HTML, такие вещи, как href и Класс :

import Html.Attributes exposing (..)

А.3. Импорт HTML-событий

Наконец, мы также импортируем события, которые будут обрабатываться как OnClick и Oninput :

import Html.Events exposing (..)

B. Представляя комментарий как объект

В ELM, как на других функциональных языках, таких как Haskell и схема, он имеет что-то называемое типом записи. Это похоже на класс, но без каких-либо методов его собственного, оно более похоже на структуру в языке программирования C.

Чтобы представлять комментарий к статье, мы определим тип записи комментариев. Он будет содержать имя пользователя и некоторые текст:

type alias Comment =
  { name : String
  , description : String
  }

C. Получение имени автора комментариев

При отображении комментариев, мы хотим сообщить пользователю, если они уже прокомментировали статью. Мы хотим проверить это, сравнивая автор комментариев с именем текущего пользователя. Когда имя автор комментария соответствует названию текущего пользователя, то их имя появится как «[имя] (вы), чтобы показать, что они уже разместили комментарий к статье.

Мы можем определить функцию, Автор Это делает это, как так:

author : String -> Comment -> String
author currentUser { name } =
  if currentUser == name then
    name ++ " (You)"
  else
    name

Первая часть – это подпись типа функции, вторая часть – это сама определение функции. Подпись типа функции не всегда должна быть определена, но это очень хорошая привычка и придает ясность к написанию кода.

D. Компоненты elm отображают модель

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

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

type alias Model =
  { newCommentText : String
  , newCommentUser : String
  , comments : List Comment
  }

Модель определяется как псевдоним типа, потому что …

E. Как добавить новые комментарии с сообщениями и событиями

Чтобы получить что-то, чтобы произойти в ELM, вы отправляете сообщения. Сообщения – это тип, который вы определяете для каждого компонента ELM; Это события, которые ваш компонент сможет справиться и отвечать на.

В нашем случае компонент Comment Box имеет эти события:

• Пользователь ввел имя пользователя для нового комментария;
• Пользователь ввел какой-то текст для нового комментария;
• Или пользователь нажал «Добавить комментарий».

Давайте определим типы сообщений для нашего компонента:

type Msg
  = AddComment
  | ChangeNewCommentUser String
  | ChangeNewCommentText String

Далее мы определяем Обновить функция. В этой функции мы будем проверять, какой тип сообщения был отправлен, а затем обновлять модель в частности.

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

Когда ChangenewCommentuser Сообщение получено, мы обновляем имя пользователя нового комментария на основе полученного значения.

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

update : Msg -> Model -> Model
update msg model =
  case msg of
    AddComment ->
      let
        comment = { name = ( "User " ++ model.newCommentUser)
        , description = model.newCommentText
        }
      in
        { model
        | comments = comment :: model.comments
        , newCommentText = ""
        }
    
    ChangeNewCommentUser username ->
      { model | newCommentUser = username }
    ChangeNewCommentText description ->
      { model | newCommentText = description }

F. Отображение компонентов и отправки сообщений для запуска событий

Теперь мы определяем некоторые функции View для отображения кусочков страницы.

F.1. Отображение списка комментариев

Функция первого представления будет отображать существующий список комментариев. А поскольку мы отображаем список, нам также нужен другой помощник функции для отображения каждого отдельного комментария:

commentView : Comment -> Html Msg
commentView comment =
  div [ class "comment" ]
    [ text (author "User A" comment)
    , text " - "
    , text comment.description
    ]
    
commentList : Model -> Html Msg
commentList model =
  div [ class "comment-list" ]
    (List.map commentView model.comments)

F.2. Отображение ввода для имени пользователя

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

inputUsername : Model -> Html Msg
inputUsername model =
  div []
    [ label[] [ text "User:" ]
    , input [ class "comment-input-user"
      , type' "text"
      , value model.newCommentUser
      , onInput ChangeNewCommentUser
      ]
      []
    ]

F.3. Отображение ввода для текста комментариев

Функция Third View отобразит текстовую область для пользователя, чтобы ввести свой новый комментарий. Всякий раз, когда пользователь вводит в коробку, ChangenewCommentText сообщение будет отправлено на Обновить функция.

inputComment : Model -> Html Msg
inputComment model =
  div []
    [ label [] [ text "Comment:" ]
    , textarea [ class "comment-input-text"
      , onInput ChangeNewCommentText
      , value model.newCommentText
      ]
      []
    ]

F.4. Отображение кнопки, чтобы добавить комментарий

Функция четвертого представления будет отображать кнопку. Когда кнопка нажата, она отправит Дополнение сообщение. Это будет вызвать добавление нового комментария к списку комментариев:

inputButton : Html Msg
inputButton =
  div []
    [ button [ class "comment-button-add"
      , onClick AddComment
      ]
      [ text "Add Comment" ]
    ]

F.5. Объединение функций просмотра на один вид

Теперь мы определяем Вид Функция, которая будет использовать функции просмотра, чтобы собрать компоненты для отображения пользователю:

view : Model -> Html Msg
view model =
  div [ class "comment-box" ]
    [ commentList model
    , div [ class "comment-input" ]
      [ inputUsername model
      , inputComment model
      , inputButton
      ]
    ]

G. положить все это вместе

Наконец, нам нужно отобразить список ввода списка комментариев и комментариев на экране. Для этого мы собираемся определить основную точку входа в этот модуль, чтобы ELM знал, что нужно сделать в браузере, как запустить веб-приложение, какую функцию существует обновление и какие существуют подписки по течению данных.

В верхней части файла нам необходимо импортировать модуль HTML.App, который предоставляет функцию определения точки входа:

import Html.App

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

model =
  { newCommentText = ""
  , newCommentUser = ""
  , comments = [ { name = "User A" , description = "Hi!" }
    , { name = "User B" , description = "Hello world!" } ]
  }

Затем мы определяем основную точку входа, используя Html.app.beginnerprogram Функция:

main =
  Html.App.beginnerProgram
    { model = model
    , view = view
    , update = update
    }

BeginnerProgram Функция – это упрощенный способ определить точку входа в программу ELM. Это позволяет вам указать модель компонента, представление, которое будет отображать модель и функцию, которая будет обновлять модель. Напротив, типичная программа ELM будет определять начальное состояние модели и любые подписки по течению данных. Упрощенный BeginnerProgram Функция позволяет нам работать быстрее.

Вот как это выглядит, когда мы кладем все это вместе:

1  -- react-tutorial.elm
2  import Html exposing (..)
3  import Html.Attributes exposing (..)
4  import Html.Events exposing (..)
5  import Html.App
6  
7  type alias Comment =
8    { name : String
9    , description : String
10   }
11  
12  author : String -> Comment -> String
13  author currentUser { name } =
14    if currentUser == name then
15      name ++ " (You)"
16    else
17      name
18  
19  type alias Model =
20    { newCommentText : String
21    , newCommentUser : String
22    , comments : List Comment
23    }
24  
25  type Msg
26    = AddComment
27    | ChangeNewCommentUser String
28    | ChangeNewCommentText String
29  
30  update : Msg -> Model -> Model
31  update msg model =
32    case msg of
33      AddComment ->
34        let
35          comment = { name = ( "User " ++ model.newCommentUser)
36            , description = model.newCommentText
37            }
38        in
39          { model
40          | comments = comment :: model.comments
41          , newCommentText = ""
42          }
43  
44      ChangeNewCommentUser username ->
45        { model | newCommentUser = username }
46  
47      ChangeNewCommentText description ->
48        { model | newCommentText = description }
49  
50  commentView : Comment -> Html Msg
51  commentView comment =
52    div [ class "comment" ]
53      [ text (author "User A" comment)
54      , text " - "
55      , text comment.description
56      ]
57  
58  commentList : Model -> Html Msg
59  commentList model =
60    div [ class "comment-list" ]
61      (List.map commentView model.comments)
62  
63  inputUsername : Model -> Html Msg
64  inputUsername model =
65    div []
66      [ label [] [ text "User:" ]
67      , input [ class "comment-input-user"
68        , type' "text"
69        , value model.newCommentUser
70        , onInput ChangeNewCommentUser
71        ]
72        []
73      ]
74  
75  inputComment : Model -> Html Msg
76  inputComment model =
77    div []
78      [ label [] [ text "Comment:" ]
79      , textarea [ class "comment-input-text"
80      , onInput ChangeNewCommentText
81      , value model.newCommentText
82      ]
83      []
84   ]
85  
86  inputButton : Html Msg
87  inputButton =
88    div []
89      [ button [ class "comment-button-add"
90      , onClick AddComment
91      ]
92      [ text "Add Comment" ]
93    ]
94  
95  view : Model -> Html Msg
96  view model =
97    div [ class "comment-box" ]
98      [ commentList model
99      , div [ class "comment-input" ]
100     [ inputUsername model
101     , inputComment model
102     , inputButton
103     ]
104   ]
105  
106  model =
107    { newCommentText = ""
108    , newCommentUser = ""
109    , comments = [ { name = "User A" , description = "Hi!" }
110      , { name = "User B" , description = "Hello world!" } ]
111    }
112  
113  main =
114    Html.App.beginnerProgram
115      { model = model
116      , view = view
117      , update = update
118      }  

VII. Использование компонента ELM на регулярной веб-странице

К крайниму, самая крутая вещь о ELM – насколько легко вставлять компоненты ELM на существующие веб-страницы и веб-приложения. Неважно, если вы используете Ember.js, angularjs или какой-то другой интерфейсный веб-каркас, вы все равно можете использовать компоненты ELM. Что делает этот крутой, это то, что когда вы работаете с существующим наследием кода, вы можете создавать новые компоненты в ELM и воспользоваться производительностью и проверкой типа безопасности ELM.

A. Компиляция файла ELM

Возьмите файл ELM, который мы написали, React-Tutorial.elm и компилируйте его с помощью ELM:

elm make react-tutorial.elm

Сгенерированный файл будет index.html И он будет содержать компонент и весь код JavaScript, необходимый для компонента. Файл, сгенерированный для меня, было около 8000 строк кода. Хотя это отлично подходит для игры с ELM и Sharing HTML-файл позволит вам поделиться компонентом, он не совпадает с настройками производства реального мира.

Давайте попробуем это снова, на этот раз, составление компонента ELM в файл JavaScript:

elm make react-tutorial.elm --output comment-box.js

Когда вы открываете Комментарий-box.js Это также будет около 8000 строк кода. Он включает в себя все ELM, все модули ELM We использовали и основной код компонента.

B. Установка компонента

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

Hello Elm!
This is an article, below is the comment box.

Чтобы вставить компонент ELM на страницу, мы собираемся использовать Сценарий Тег, чтобы импортировать файл JavaScript, который мы только что сгенерировали.

Затем мы собираемся вставить окно комментариев в элемент, идентификатор которого является «комментарий». Шаги будут похожи при интеграции эльма в рамки, такие как Angularjs и Ember.js:

C. Просто для удовольствия: стайлинг коробка комментариев в Facebook

Просто чтобы соответствовать стилю Facebook, давайте добавим некоторые CSS для компонента ELM.

Вот как это выглядит:

.comment-box {
  border-radius: 3px;
  border: 1px solid #ccccff;
  padding: 10px 3px;
  }
    
.comment-input {
  margin-top: 10px;
    }
    
.comment-input label {
  color: #5555cc;
    }
    
.comment {
  padding: 10px;
  margin-bottom: 5px;
  background-color: #eeeeff;

.comment-button-add {
  border-radius: 2px;
  border: 1px solid #555555;
  color: #333333;
  background-color: #ffffff;
  box-shadow: 0px 1px 5px 0px #aaa;
    }

D. Собрать окончательный HTML-файл

И, наконец, давайте посмотрим, как это выглядит, когда все это собрано. Мы устанавливаем стиль компонента, затем, включая файл JavaScript, который был скомпилирован ELM.

1  
2    
31    
32      
Hello Elm!
33      
This is an article, below is the comment box.
34      

35      
36      
40    
41  

VIII. Давайте посмотрим, как оказалось

Вот как это выглядит в браузере:

Спасибо, что ознакомились с этим руководством по использованию функционального языка программирования ELM для интерфейсного веб-разработки. Это отличная альтернатива другим языкам, которые компилируют JavaScript, как Teadercript или Babel/ES6. ELM имеет идеи о неизменности и подписки по течению данных, встроенные, наряду с проверкой типа. Это сильная альтернатива JavaScript и, как показано в этом уроке, это также простое, чтобы выучить альтернативу библиотекам и каркасам, таким как entt.js.

Попробуйте ELM для небольшого компонента, такой как коробка комментариев или форма опроса на вашем следующем веб-сайте. Счастливого взлома!

Другие учебники, которые вы можете найти интересным

• Создайте клон Trello, используя угловые, Node.js, Mongo и Express
• Создание красно-подобной системе комментариев с рельсами
• Создание приложения для путешествий геолокации IOS с реактивным