maestrow

Frontend development in F#

Введение

Во frontend-разработке давно сущесвтуют инструменты и технологии, позволяющие писать код для браузера не только на javascript.

Самые распрастраненные языки, которые могут компилироваться в javascript:

• CoffeeScript
• TypeScript

maestrow

• Лучший, на мой взгляд, источник - Category theory for programmers by Bartosz Milewski. Seattle, Summer 2016 - видео лекции. Additional material at https://bartoszmilewski.com/2014/10/28/category-theory-for-programmers-the-preface/. Версия в pdf: https://github.com/hmemcpy/milewski-ctfp-pdf
• Теория категорий на JavaScript. Часть 1. Категория множеств и Введение в преобразование моделей
• Теория категорий для программистов, Функторы Седьмая глава из серии статей, указаны ссылки на предыдущие статьи.
• От математики к обобщенному программированию Ориг.название From Mathematics to Generic Programming. Авторы Александр Степанов, Дэниэл Э. Роуз.
• Категория Hask о теории категорий в контексте системы типов язы

maestrow

Create Fable Application manually from scratch

Для создания проекта fable в dotnet core доступен специальный шаблон. Установить его можно командой dotnet new -i Fable.Template. А создать новое приложение по данному шаблону можно командой dotnet new fable -n FableApp -lang F# -o . (FableApp - имя проекта; -o - путь к папке проекта, по умолчанию текущая директория).

В данной статье рассматривается инструкция по созданию такого шаблона (каркаса приложения fable) с нуля, что поможет разобраться в архитектуре Fable.

maestrow

source https://www.nuget.org/api/v2
framework >= net462
nuget FSharp.Data
nuget DotLiquid

maestrow

• Suave, курс из F# weekly
• Fable
• Fable.Remoting: Automated Type-Safe Client-Server Communication for Fable Apps
• https://sergeytihon.com/2015/09/06/swagger-for-f-web-apps/ и https://rflechner.github.io/Suave.Swagger/#/
• https://www.getpostman.com/apps
• https://thegamma.net
• Azure Functions
• https://medium.com/@zaid.naom/minimalistic-live-testing-fable-apps-with-qunit-b9d9f2f64725
• Об isomorphic rendering : SAFE-Stack/SAFE-BookStore#67
• Chiron - Json for F#

maestrow

D3 - Data Driven Documents - Документы, управляемые данными. Для данной библиотеки существует большое количество учебных материалов и документации. Ссылка "Documentation" на главной странице сайта https://d3js.org ведет в вики-раздел на github. В версии 4 была переделана архитектура библиотеки.

D3 v4 is written using ES6 modules. It is composed of a number of microlibraries such as d3-selection, d3-scale, d3-color etc. This modular organization allows us to install and load the modules which are required in our project. On the contrary its predecessor D3 v3 was one big library that we were bound to load in its entirety even if we use only some of the functionalities.

maestrow

Сегодня наткнулся на достойный внимания проект Fornax - генератор статических сайтов. Интересен он тем, что:

• написан на F# :)
• автор проекта KRZYSZTOF CIESLAK - активный деятель F# Open Source сообщества
• в качестве шаблонов используется F# EDSL

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

Итак, какие инструменты генерации статических сайтов сегодня популярны:

maestrow

Недавно я рассуждал на тему адаптации библиотеки D3js для использования на F#. Я видел 2 варианта:

1. Написать Fable-биндинг - F# интерфейс для существующей javascript-библиотеки;
2. Портировать ключевые идеи библиотеки на F#: оси, шкалы, и т.д. - некий базовый функционал, которых позволит генерировать примитивы SVG. И также использовать Fable для компиляции F# кода в JS. Если подразумевается интерактивность, то можно задействовать fable-elmish в качестве ядра архитектуры визуального компонента.

Однако есть еще один вариант, который в частности используется в XPlot - генерировать javascript код :) по шаблонам. Т.е. есть ряд шаблонов, в которых на js конфигурируется график. А процессе рендеринга в местозаполнители подставляются данные. Пример шаблона: https://github.com/fslaborg/XPlot/blob/master/src/XPlot.D3/jsTemplate.js.

maestrow

Dashboard libs:

• https://github.com/Freeboard/freeboard
• http://dsmorse.github.io/gridster.js/
• http://stackoverflow.com/questions/12541423/alternative-to-gridster
• http://mcpants.github.io/jquery.shapeshift/
• http://troolee.github.io/gridstack.js/
• https://grafana.com/grafana
• https://github.com/tabler/tabler

maestrow

Html5:

• https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

Libraries:

• http://createjs.org
• http://jakiestfu.github.io/Medium.js/docs/
• https://github.com/ianstormtaylor/slate
• http://fabricjs.com