Вступ
Вебзастосунки
Elm - це чудова мова для створення надійних вебзастосунків. У неї дружні повідомлення про помилки, висока продуктивність, невеликий розмір зібраного коду і жодних винятків під час виконання.
Мабуть, найвідоміша й найчастіше копійована частина Elm - The Elm Architecture. Це простий підхід до структурування вебзастосунків, і саме так пишуть усі вебзастосунки на Elm.
Основна ідея полягає в тому, що код будується навколо Model - моделі стану застосунку, функції update, яка цю модель оновлює, і функції view, яка її показує.
Model містить стан застосунку, тобто всі дані, які йому потрібні. Якщо уявити простий застосунок із текстовим полем і текстом, що показує цей текст у зворотному порядку, модель матиме такий вигляд. Цей самий приклад можна також побачити в Elm Guide.
type alias Model =
{ text : String
}
update - це функція, яку викликають із Msg, коли щось змінюється (наприклад, користувач натискає кнопку). Вона приймає Msg і поточний Model та повертає новий Model.
type Msg
= TextChanged String
update : Msg -> Model -> Model
update msg model =
case msg of
TextChanged newText ->
{ model | text = newText }
view - це функція, яка повертає HTML, що його браузер показує користувачу. Вона приймає поточний Model і повертає Html Msg (тип, яким Elm позначає HTML).
view : Model -> Html Msg
view model =
Html.div []
[ Html.input
[ Html.Attributes.placeholder "Text to reverse"
, Html.Attributes.value model.text
, Html.Events.onInput TextChanged
]
[]
, Html.div [] [ Html.text (String.reverse model.text) ]
]
Вказівки
Ваша подруга Паула намагається краще розгадувати підказки в кросвордах. Вона прочитала, що деякі підказки вказують на те, що відповідь є паліндромом.
Паліндром - це слово або речення, яке читається однаково в обидва боки.
Вона просить написати їй дуже простий вебсайт, який перевірятиме, чи є рядок тексту (англ. string) паліндромом, щоб вона могла перевіряти свої здогади.
Ми вирішуємо зробити це за допомогою застосунку [sandbox][browser-sandox] на Elm.
Застосунок матиме текстове поле, у яке Паула зможе вводити свій здогад, і текст, який повідомлятиме, чи є текст у полі паліндромом.
Текст оновлюватиметься щоразу, коли текст у текстовому полі змінюється.
1. Визначте типи Model і Msg для застосунку та напишіть функцію init
Типу Model застосунку потрібен рядок тексту для перевірки, і це поле має називатися content.
Застосунку потрібен Msg, щоб позначити, що текст у текстовому полі змінився.
Відповідний варіант має називатися Change.
Функція init має повертати початкове значення Model з порожнім полем content.
2. Напишіть функцію update
Функція update має приймати параметри Msg і Model та повертати новий Model.
Msg нестиме текст, який ввів користувач, а новий Model має містити цей текст.
3. Напишіть функцію view
Elm вимагає, щоб функція view повертала тип Html msg, а це означає, що з функції view потрібно повернути один елемент (а не масив елементів).
Усередині цього кореневого елемента мають бути елемент input (текстове поле) і div із вмістом text, який показує, чи є текст у input паліндромом.
Текст має бути «This is a palindrome» або «Not a palindrome».
4. Напишіть функцію main
Функція main має викликати Browser.sandbox, передаючи параметр-запис із функціями init, update і view.
Щоб вправа працювала в онлайн-редакторі Exercism, ми використовуємо підроблений Browser.sandbox разом із кодом.
Для коду, який ми пишемо, щоб розвʼязати цю вправу, це нічого не змінює.
Навчальна вправа
