一个前端项目,到底要集成多少库和工具

最近忙于一些新做的项目,由于新入手,就想着往最佳实践去靠,也寻找一些可以借鉴的模板。其中前端的部分,有很成型的模板可以借鉴。大幅度减少了自己调查和集成的工作量。但是仔细看看,发现这里头的概念太多了,各种开源的库和工具,有人说“前端玩的是广度”是有道理的。

这个新项目并不算特别复杂,大致的技术是基于 React+Redux 的,但是大体上集成完毕以后,完成了几个 demo 的代码之后,粗粗地过了一遍,除了传统意义上的 HTML+CSS+JavaScript(遵循 ECMAScript 6 的标准)三大件,居然涉及到了那么多技术,把自己吓了一跳:

  • React: an open-source dec

[……]阅读全文

A page widgetization practice

widget

I was working on the page reconstruction recently, and here is how I divide a page into widgets and how do they interacts in this new attempt.

Core Concepts

Page and widget: A page is composed by several widgets, and a widget is the minimum unit for reuse.

Widget controller: Accepts multiple widget

[……]阅读全文

GWT 初体验

GWT

最近体验了一下 GWT(Google Web Toolkit),其实这个技术老早就有了,写 Java 代码,代码很像 AWT 或者 Swing,但是最后编译成一个 war 包,也就是说,没有啰嗦的 JavaScript、HTML 和模板语言,Java 从前到后通吃,常用的模块都被封装成组件了。虽说写起来代码还挺啰嗦的(写法上面居然不支持链式调用,这确实让我看不懂),而且也没有传统 Web 开发方式来得直观,但也算一种很有意思的开发方式,值得体验一下。网上有足够多的教程,要系统地学习,官方文档是最好的材料 ,非常详尽。而我的方式,则更具个人风格一点,比较+吐槽,这可不是教程。

工程结构

我是用 Eclipse+Goo

[……]阅读全文

Chrome 插件开发

plugin经常要访问一些工具网站,根据页面上特定的取值。这些行为其实完全可以被视作重复劳动,有机会被脚本或者插件的自动行为取代。iMacro 或者 Greasemonkey 都是做这件事的好工具,今天下午有时间,要不干脆写一个 Chrome 插件吧。

没有必要去 Google 什么教程, 官方的文档 已经非常详细,足够指导整个过程了。文档的质量非常好,又有很多例子,是很不错的示例。本质上,用到的技术还是 HTML、JavaScript 和 CSS。我不在这里说太多,推荐大家去浏览一下,即便不做插件开发这件事情,过一下文档也是有收获的。如果你想尽快上手,解决重复劳动的问题而已,对这种好似路边花花草草的小东西没有钻研的兴趣,那么不

[……]阅读全文

程序员,都去写一写前端代码吧

html 你可以认为我是一个极端的人,就像有许多人专注于自己的领域而不屑于其它“ 肤浅” 的工作范畴一样。比如我见过不少认为做 portal 没有技术含量的判定,做工程都是充满苦逼行为的言论,最近则还有那些“ 大数据” 崇拜者的疯狂吐槽…… 我的极端则有些不同,我的极端在于我认为绝大多数优秀的程序员,都要尝试多方面的事情。并不只有底层开发或者机器学习充满睿智的挑战,我做了几年网站,很难说这就是我最初的兴趣,虽然也在接触和学习其他的领域,但是依然觉得,做网站仍旧充满挑战,互联网真是一个奇葩充斥的地方。

前端开发,则是这“ 多方面的

[……]阅读全文

页面模板的重构

page_divide 最近在工作中重构一个老系统,烂的地方有很多,但是对于后台的页面模板(我指的是 JSP、FreeMarker、Velocity 这样的后台模板,JavaScript 前端模板不在此讨论范围内),却是我要说的部分,这似乎是一个被人遗忘的小角落。你可以很轻易地找到怎样重构 Java 类和方法的材料,你的 Java 代码可以写得很优雅;去搜搜“重构”,到处是怎样重构你的 Java 代码、C++代码,我们也能找到许多前端设计师对于页面结构的重构,但是重构的范围远非至此。

后台业务逻辑写得再好,一个 jsp、ftl 模板页面还是可能写上几千行,业务逻辑耦合在呈现代码里面,看起来一团糟,对这部分的重构,既不属于传统的 Java 代

[……]阅读全文

前端解耦的一个最简单示例

且看这样一段 HTML 片段:
<div style="background-color: red" id="name" onclick="alert('');">
    Jim
</div>
这是前端代码全部耦合在一起的例子,下面对它进行 MVC 解耦。
 
第一步解耦,把 View 层分离出来:
<div id="name" class="name" onclick="alert('');">
    Jim
</div>
同时,引入一表示 name 的 css。
 
第二步解耦,把 Controller 分离出来:
<div id="na

[……]阅读全文

Web 页面的聚合技术

近接触到了 Mason,并且了解到了它基础之上的一个 MVC 框架实现,随即联想到做网站以来接触到的各种各样的页面聚合的场景,颇有意思。

页面聚合本身是一种“分而治之”的思想,把复杂的页面分割成可以被重用和独立维护的部分,这些部分的来源灵活,可以来自同一个 web app 中,也可以来自不同的域;可以聚合独立的子页面(页面集成),也可以聚合数据(数据集成),甚至可以聚合子呈现(模板集成)。

客户端聚合

这种聚合的最大好处在于把聚合的工作分散到如今越来越强势的客户端,减轻了服务端的压力;另一方面,也从一定程度上简化了服务端的设计。客户端聚合在互联网初期比较少见,如今随着客户端性能越来越优秀,客户端聚合的优

[……]阅读全文

CSS 也面向对象

css 最初接触到面向对象的 CSS 还是因为项目中的 CSS 已经超过八千行,缺乏约束和管理,在近期或者是不远的将来,有迫切的要求需要重构。在前端重构中,除了 JavaScript 重构,不妨再看一看 CSS 面向对象和模块化,这给我的工作提供了非常好的思路。

首先,我要说的是,在这个概念翻飞的年代里,固执地追求某些概念和涵义,并不能带来更优秀的设计和更高的生产力,面向对象是一种思路,或者说是一种方法论,给 CSS 重构带来一些启示,这就足够了,没有必要去纠结 OO CSS 的定义和严谨性。

我们的 CSS 代码遇到了什么问题?

重用性差,看着一个 CSS 的名称,很难说出哪些模块可能引用到了它,这个 CSS 是用作网页的哪些部分

[……]阅读全文

由后端来类比前端设计的思考

design 有这样一句话被提起:

前端也有 MVC,DOM 树就是这个 M,CSS 就是这个 V,至于 C,非 JavaScript 莫属。

很高兴团队中有越来越多的人能够跳出某种语言、某种平台的局限性,站到抽象的层次上思考一些设计上的问题。在我的印象中,似乎前端开发总是容易给人以随意、混乱的感觉,可真的是前端技能不容易掌握吗?

大学里 Java 课程正儿八经学了 3 年,JavaScript 只字未提,只是课余时间凭借着兴趣自学,加起来也就两三个月。

前端代码更加灵活,无论是 HTML、JavaScript 还是 CSS,似乎任何一个初学者都可以轻松入门。可是越是看似简单的东西,就越难以精通地掌握,没有好

[……]阅读全文

back to top