零到OM

这是一系列关于OM的博客文章的第一部分。如果你对OM一无所知,别担心!你将一步一步地学习每件事。以下是基础知识:OM是Facebook反应的ClojureScript接口。.如果那还不响的话,再一次,别担心!

注释只是开始学习react.js,Clojurescript和OM。所以这是我自己学习的方法:带你和我一起去兜风。必须具备现代网络开发的基本知识,不过。

舞台

实践学习很有趣。我们将在一个小的Todo应用程序的帮助下学习OM。

如果你是一个网页开发人员,而且还没有听说过托多姆然而,在过去的几年里,你要么失业,要么陷入昏迷(除了react.js,你没有错过太多)。这是一个“项目,它提供了在当今大多数流行的javascript框架中实现的相同的todo应用程序[…]。

这就是它的样子:

作为本系列的基础,我将使用Todo应用程序的实现由OM的创造者自己写的,戴维诺伦.你可以使用应用程序玩看看它能做什么。

演员

让我们看看我们的努力需要什么技术。

反应物

反应物是Facebook中用于构建用户界面的JavaScript库。把它想象成MVC中的V。它使数据和DOM保持同步,并且非常通过使用内存中(虚拟)DOM一次批处理所有更新,可以有效地完成此任务。这就是3D引擎的工作原理。

语篇

语篇是编译为javascript的Clojure方言。它是一个动态类型,函数式编程语言,着重于不可变的数据结构。

谷歌关闭工具

谷歌关闭工具由一个带有丰富实用程序的javascript库组成,跨浏览器Web应用程序和用于优化javascript的编译器。

光桌

光桌是一个开源的IDE,主要面向Clojure/ClojureScript开发。它最有趣的特性之一是代码的内联评估。

莱宁根

莱宁根是一个基于JVM的Clojure构建工具。它的CLSJBED插件自动将clojurescript编译为javascript。

奥姆

最后,奥姆是将react的功能性与函数语言clojurescript及其不变的数据结构结合在一起的神奇的goo,简化应用程序架构并显著提高流程中的性能。

第1幕

起初,让我们尝试运行应用程序。如果我们签出我的-稍微修改过的原始版本-吉瑟布-我们会看到一堆文件:

bower_components/todomvc common/src/todomvc/app.cljs item.cljs utils.cljs bower.json index.html项目.clj readme.md

鲍尔森是的清单文件凉亭管理外部资源。在本例中,它将样式表和图像下载到公共托福对我们来说。

索引文件是我们在浏览器中打开以展示应用程序的HTML文件。所以我们开始吧!

还有…织补

get file://…/out/goog/base.js net::err_file_not_found index.html:15 get file://…/app.js net::err_file_not_found index.html:16未捕获引用错误:未定义goog

好,让我们看一下文件,看看可能出了什么问题:

[…]
       
  
  
  
       
[…]

这个文件加载了大量的脚本,如果你查看我们当前的目录,你会很快注意到:大多数脚本都不存在,然而。我们需要先建造它们!

那是我们需要的地方工程项目.它包含了项目的构建配置。下一步,我们运行:

$leiningen cljsbuild once devcompiling clojurescript.从[“src”]编译“app.js”。

现在我们有一个新文件App.JS文件夹外面的里面有很多文件。如果我们刷新浏览器,问题就消失了,我们会关注一个功能正常的todo应用程序。壮观的!

如果我们看看App.JS我们会看到这样的情况:

goog.addDependency(“base.js”,[ Goo' ][];goog.adddependency(“../cljs/reader.js”,['cljs.reader'],[ Goo.String’,“CLSJ.CARCH”];goog.adddependency(“../om/dom.js”,[ OM.DOM’)[ CLJS核心])[…]

这是谷歌在工作中的关闭。它的特点是模块加载器.每个clojurescript文件都转换为一个闭包模块。每个模块可以依赖于许多其他模块。加载程序位于输出/goog/base.js.应用程序的所有依赖项都定义在App.JS.要启动我们的应用程序,我们需要加载主模块:goog.require(“todomvc.app”)。.这正是索引文件做。


第一幕到此结束。
第2幕我们将详细研究ClojureScript源代码。


评论由迪斯科