关于 Elm 的分享, 底稿

分享...

关于 MVC, FRP, jQuery..

怎么用?
怎样实现? --- x
一份幻灯片?

MVC 历史

http://mvc.givan.se/

Model View Controller: History, theory and usage http://amix.dk/blog/post/19615

MVC演化史 http://huoding.com/2011/05/02/64

MVC, MVP, MVVM

[译]: MVC, MVP 和 MVVM 模式的对比

在哪里? 怎样? 去维护 UI 当中的状态?
业务逻辑在应用的什么地方? 怎样被调用?
怎样保证 UI 跟数据的改变同步? 还有 UI 元素之间相互同步?
怎样保证对我们关心的代码做分离, 来降低可测试代码的耦合?

动画 MVC?

游戏当中不用动画: http://gamedev.stackexchange.com/a/3436/54450

Because MVC doesn't fit in the architecture of a game. The dataflow for a game is entirely different than that of a enterprice application, because it's not as event driven and there is often a (very) tight millisecond budget in which to perform these operations. There are a lot of things that need to happen in 16.6 milliseconds so it's more beneficial to have a 'fixed' and rigid data pipeline that processes the data you need on screen in exactly that time.

Reactive Programming

Wikipedia:

In computing, reactive programming is a programming paradigm oriented around data flows and the propagation of change. This means that it should be possible to express static or dynamic data flows with ease in the programming languages used, and that the underlying execution model will automatically propagate changes through the data flow.

https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

Reactive programming is programming with asynchronous data streams.

Elm

A functional reactive language for interactive applications

http://elm-lang.org/Examples.elm

官网 http://elm-lang.org/

作者: https://github.com/evancz

FRP

http://elm-lang.org/papers/concurrent-frp.pdf

High order FRP:

Signals are connected to the world
Signals are infinite
Signal graphs are static
Synchronized by default

Elm 的特点

两大功能:

global delay: 事件的时序性, 界面的实时性
needless computation: 重复计算 memoization,

函数式

immutable
pure

expressiveness, efficiency

语法

http://elm-lang.org/learn/courses/beginner/Programming.elm

模仿 Haskell.. 但是自己实现了语言, 高阶函数, 但不是惰性求值

历史, 三种 FRP

Paul Hudak...

classic FRP: 1997, Haskell
Behavior(随着时间改变的值), Event(时间行为元组列表)
lazyness, 性能, 内存
Real Time FRP: 2001, 两种语言
Signal(随着时间改变的值)
2002 Event-Driven FRP
Not Expressive
Arrowized FRP, 2002
Signal. Signal function

介绍

演讲 Controlling Time and Space

幻灯片 https://prezi.com/rfgd0rzyiqp_/controlling-time-and-space/
视频 https://www.youtube.com/watch?v=Agu6jipKfYw

Hot-swapping in Elm

http://elm-lang.org/blog/Interactive-Programming.elm

纯函数, 渲染部分的代码可以完全替换:

Immutable Data – data cannot be modified after creation
Pure Functions – same arguments, same result

静态类型, 在代码运行前发现错误.

React 的热替换, 代码报错, 破坏掉状态. 需要刷新.

Reactor, Time Traveling Debugger

http://debug.elm-lang.org/
http://elm-lang.org/blog/Introducing-Elm-Reactor.elm

所有的时间被 Event 被存储, 每 100 个 Event 会存储一个 Snapshort.
可以快速在每个事件跳转, 可以 undo, 重写历史

Virtual DOM in Elm

http://elm-lang.org/blog/Blazing-Fast-Html.elm

profile : User -> Html
profile user =
    div [ class "profile" ] [
        img [ src user.picture ] [],
        span [] [ text user.name ]
    ]

Ember Glimmer

参考了 Virtual DOM 提供的一个高效更新 DOM 的方案.

Ember.js: Implement Glimmer Engine
https://github.com/emberjs/ember.js/pull/10501
https://youtu.be/o12-90Dm-Qs?t=3077
http://f.cl.ly/items/0t031v2Z3y001V1N0F3N/Virtual%20DOM.pdf

关于 DBMonster 的测试 http://blog.nparashuram.com/2015/03/performance-comparison-on-javascri...

The Elm Architecture

Todolist 的例子: https://github.com/evancz/elm-todomvc/blob/master/Todo.elm

架构, 组合, 复用 https://github.com/evancz/elm-architecture-tutorial

理论研究, 不能直接用在项目当中, 但是可以作为指导.