Рубрики
Без рубрики

Веб -приложения Feliz для JavaScript Devs

Привет, прошло много времени с тех пор, как я что -то здесь написал 😁 В прошлый раз я писал что -то об Авалонии … Tagged с Fsharp, Dotnet, JavaScript, React.

Привет, прошло много времени с тех пор, как я что -то здесь написал 😁

В прошлый раз я писал что -то об Авалонии и Авалонии. Funcui способ написать настольные приложения с F# простым и легким способом.

Сегодня я дам вам что -то немного другое, я вернусь к своим веб -корням и покажу вам, как легко вы можете создавать веб -приложения с F# и отреагировать под капотом. Этот пост направлен на разработчиков JavaScript, которым может быть немного скучно от JavaScript и ищет что -то новое, чтобы добавить в свой стек, или для других разработчиков, которые могут искать альтернативы JavaScript с сильным набором, но по какой -то причине не хотят Перейти к TypeScript/Flow.

Если вы были вдали от какого -либо .NET в течение довольно долгого времени, вы можете не знать, что .NET бесплатный и открытый исходный код. Нет, вам не нужна визуальная студия, нет, вы не будете заблокированы в сборе с лицензированием И да, вы можете даже попытаться пойти Fullstack f# после попытки этого.

Что мы будем использовать сегодня?

NVM не требуется, но рекомендуется, если вы решили использовать NVM, пропустить ссылку NodeJS и следить за соответствующими инструкциями по репозиторию NVM.

Весьма вероятно, что вы уже используете VSCODE из -за его популярности.

После установки необходимых инструментов сверху мы можем продолжить, давайте начнем с командной строки.

Создайте проект

Вам нужно установить шаблоны Feliz на вашем компьютере на этом этапе

dotnet new -i feliz. Шаблон::*

В моем случае будет так:

dotnet new feliz -o FelizSample

(-o означает выход, куда поместить проект)

Затем откройте экземпляр Vscode, где бы вы ни выбрали. После этого не забудьте включить расширение ионида либо во всем мире, либо Проектная база

Вы увидите следующую структуру проекта, как только вы будете готовы продолжить

Установить зависимости

Теперь, чтобы мы начали взламывать, нам нужно установить зависимости узел.

npm install # or yarn install or pnpm install your choice

Когда вы запустите команду старта, зависимости Dotnet установит себя

Бежать

npm start

а затем перейдите в Localhost: 8080, чтобы увидеть приложение.

Если вы видите в моем браузере, у меня есть расширение React Dev Tools, а также установленное расширение Redux Devtools (если вы сами разработчик React, вы уже можете установить их) … Так что да, у вас уже есть хороший опыт разработчика, когда вы начинаете нажимать эти кнопки

Код

Наконец -то код!

Теперь, когда у нас есть приложение запустить, давайте проверим немного кода. Feliz – это DSL для синтаксиса React, и то, как написан Feliz, он напоминает API React, он даже поддерживает Крюк! В образце из коробки используется Элмиш образец который использует Архитектура ELM

Вы можете либо продолжать использовать эту архитектуру, которая, я полагаю, довольно здорово, что я говорил об этом в своей авалонии. Серия Funcui, он использует реализацию Elmish для Avalonia, поэтому, если вы читаете, это также применимо к этому посту.

Если вы хотите использовать компоненты функций React, вы также можете это сделать

let counter = React.functionComponent(fun () ->
    let (count, setCount) = React.useState(0)
    Html.div [
        Html.h1 count
        Html.button [
            prop.text "Increment"
            prop.onClick (fun _ -> setCount(count + 1))
        ]
    ])

let private reactCounter = React.functionComponent("ReactCounter", fun () ->
    let (count, setCount) = React.useState(0) // Yup, Hooks!
    let text = sprintf "ReactCounter: %i" count
    Html.div [
            Html.h1 text
            Html.button [
                prop.text "Increment"
                prop.onClick (fun _ -> setCount(count + 1))
            ]
            Html.button [
                prop.text "Decrement"
                prop.onClick (fun _ -> setCount(count - 1))
            ]
        ]
 )

let render (state: State) (dispatch: Msg -> unit) =
    let text = sprintf "ElmishCounter: %i" state.Count
    Html.div [
        Html.h1 text
        Html.button [
            prop.onClick (fun _ -> dispatch Increment)
            prop.text "Increment"
        ]

        Html.button [
            prop.onClick (fun _ -> dispatch Decrement)
            prop.text "Decrement"
        ]
        Html.hr []
        reactCounter() // it's used here
    ]

Эй, но как насчет реквизита? Чтобы использовать реквизиты в ваших компонентах React, вам просто нужно предоставить аннотацию типа. Без слишком много дайвинга в файле main.fs мы просто вытащим вещи Элмиша и использовать Reactcounter напрямую

module Main

open Fable.Core.JsInterop
open Feliz
open Browser.Dom

importAll "../styles/main.scss"

ReactDOM.render (App.reactCounter { count = 10 }, document.getElementById "feliz-app")

Мы просто идем прямо на API React и отображаем наш компонент

module App

open Feliz
type CounterProps = { count: int }

let reactCounter = React.functionComponent("ReactCounter", fun (props: CounterProps) ->
    let (count, setCount) = React.useState(props.count)
    let text = sprintf "ReactCounter: %i" count
    Html.div [
            Html.h1 text
            Html.button [
                prop.text "Increment"
                prop.onClick (fun _ -> setCount(count + 1))
            ]
            Html.button [
                prop.text "Decrement"
                prop.onClick (fun _ -> setCount(count - 1))
            ]
        ]
 )

И это выход

И это все! Если бы вы когда -нибудь хотели попробовать f# Но вы почувствовали, что архитектура Элмиша была довольно страшной или что она была слишком много, пытаясь выучить F#, а также Элмиша в то же время, когда Фелиз здесь, помогите вам!

У Feliz есть некоторые библиотеки, чтобы помочь вам облегчить веб -разработку, например

  • Feliz Router
  • Фелиз Recharts
  • Feliz Pigeonmaps
  • Feliz materialui
  • Фелиз Булма

Их можно найти в тех же документах, что и Feliz

Заключительные мысли

Фелиз может помочь вам изучить добро, что F# принимает ваши существующие знания React, а также я не упомянул об этом, но шаблон Feliz также включает в себя проект тестирования, который использует Fable. Мокко так … Да, у вас также есть хорошие инструменты, чтобы начать работу над своим следующим проектом!

Вы можете проверить исходный код здесь

Angelmunoz/felizsample

Этот шаблон заставляет вас работать с простым веб -приложением, используя Басня , Элмиш и Фелиз Анкет

Требования

редактор

Чтобы написать и отредактировать свой код, вы можете использовать любой VS Code + Ионид , Emacs с FSHARP-режим , Райдер или визуальная студия.

Разработка

Прежде чем что -либо делать, начните с установки зависимостей NPM, используя NPM Установка .

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

npm start

Это запустит сервер разработки после составления проекта, как только он будет завершен, перейдите к http://localhost: 8080 Чтобы просмотреть приложение.

Чтобы построить приложение и готовить к производству:

npm run build

Эта команда создает приложение и помещает сгенерированные файлы в развернуть каталог (может быть перезаписан в webpack.config.js).

Тесты

Шаблон включает в себя тестовый проект, который готов к работе, который вы можете запустить …

Если вы заинтересованы в большем количестве постов Feliz, дайте мне знать в комментариях или в Twitter:)

Оффтопический: кстати, я транслировал F# кодирование в https://twitch.tv/tunaxor В течение нескольких дней, если вы заинтересованы в прохождении:) Расписание в канале

Оригинал: “https://dev.to/tunaxor/feliz-web-apps-for-javascript-devs-m22”

Читайте ещё по теме: