梳理下我至今对界面和编程方面的想法

加上最近了解的的东西梳理一下包括以前的一些想法, 包括新的旧的
限于个人的阅历, 文中的链接会很片面, 有兴趣的同学可以帮忙补充
这篇笔记涉及了我对前端的理解, 经验, 以及臆想, 欢迎交流想法

WebCity

虽然到现在阿尔法城宣告失败了, 但回想当初, 到现在我依然觉得那是 Web 未来的样子
所有的软件像是建筑一样连接在一起, 人流形成 Web 上的通路

结合屏幕, 投影, 虚拟现实, 人类沉浸在一个自己用代码写出来的世界当中

Sight http://v.youku.com/v_show/id_XNDMyNDI1ODYw.html

Hololens http://v.youku.com/v_show/id_XODc4NTExODcy.html?from=s1.8-1-1.2

Future Vision http://www.microsoft.com/enterprise/productivityvision/default.aspx#fb...

川原砾小说改编的动漫我很喜欢, 日漫中未来科技重塑世界例子很多, 耳濡目染

建造世界

想象当中, 我们觉得创造世界很简单, 拼接几何图形, 进行组合, 不断进行组合

World Builder http://v.youku.com/v_show/id_XNTA0MjQwMzA4.html
零世界创世工具 http://www.tudou.com/programs/view/WTDRmnxiXuQ/
Tant de Forets excerpt rev (...森林..?) https://vimeo.com/107304276

而且宇宙也似乎就是靠着简单的规则, 不断迭代直到现在这样复杂的世界的

宇宙的本质是计算 http://www.guokr.com/article/439770/
Rule 30 http://en.wikipedia.org/wiki/Rule_30

然而从实际的编程看, 事情远远没有那么简单, 我们也远远还没到那样的程度

图形工具

首先绘制图形已经是不简单的事情, 现在工具我觉得 Paper 跟 Sketch 已经很赞了
可是从效率跟结果上说, 设计的界面距离成为网站依然很远很远

Paper by FiftyThree https://www.fiftythree.com/paper

Sketch http://bohemiancoding.com/sketch/

比如说网站建站工具 Deamweaver, Visual Studio, 看起来像是很快建站
但是涉及到稍微复杂的逻辑, 建站工具的功能不足以全部覆盖

Pinegrow http://pinegrow.com/
Strikingly http://www.strikingly.com/

Animate http://tumult.com/hype/

Frammer http://framerjs.com/

Facebook Origami https://facebook.github.io/origami/

Pixate https://app.pixate.com/login

编码和设计

Web 平台既能够写逻辑, 又非常轻量, 现在的开发工具已经快了很多
特别是近些年代码热替换技术不断出现, 已经让前端开发往前推进不少

LightTable JavaScript https://www.youtube.com/watch?v=gtXpOD6jFls

Elm(Time Traveling Debugger) http://elm-lang.org/

我的做的演示(workspace, Brackets) http://www.tudou.com/programs/view/MbedrkfLBQY/
Workspace https://developer.chrome.com/devtools/docs/workspaces
Brackets http://brackets.io/
Amock http://amokjs.com/

甚至出现一些非常有潜力的图形化编程的工具, 某些场合非常高效

Polymer Designer https://www.youtube.com/watch?v=djQh8XKRzRg
Noflo http://noflojs.org/

CSS, GSS

同时依赖布局技术的增强, 比如说 Flexbox 能让前端布局效率大大增加
并且相关的技术也开始影响到移动平台开发调试的首发当中

Flexbox http://bocoup.com/weblog/dive-into-flexbox/

React Native Flexbox https://github.com/tmallfe/tmallfe.github.io/issues/19
CSS Grid Spec http://www.w3.org/TR/css-grid-1/

同时作为布局方面更优秀的方案, GSS 也许未来能带来不小的突破
可以使用比 Flexbox 更灵活的相对布局来更智能地生成界面

https://raygun.io/blog/2014/06/next-gen-constraint-layouts-browser-gri...
http://www.creativebloq.com/css3/how-build-better-layouts-gss-polyfill...

http://www.tudou.com/programs/view/O-2wCCnD7aw/
http://www.tudou.com/programs/view/0gYYGHjLeMg/

复杂图形

前面的技术对于用户界面有用, 对于更复杂精致的界面, 需要更强大的技术
比如 3D 界面的绘制, 比如动画精致细腻的 UI, 对应 WebGL 和 DOM 方面的优化

Three.js http://threejs.org/
Famo.us https://famo.us/blog/

等前端走到了大量游戏涌入的那一步, 应该会有更方便的技术冒出来
对于游戏我的了解非常不足... 期待补充...

设计的版本控制

代码的版本控制已经成熟, 但设计方面似乎还是挺原始的状态
而且 LayerVault 最近也关了, 只能其他其他相关的工具能有进展

https://www.pixelapse.com
http://wake.io/

很让我注意的是一款还在开发的设计工具 Bind, 声称采用 GSS, 将便于版本控制
总体上能看到设计跟编程走近的趋势, 用编程工具来完成设计, 而不是用作图工具

Bind https://medium.com/@almonk/design-like-it-s-1999-48ce5f5be14
https://github.com/almonk/bind

Hacker 创造的世界

Hacker 指的是那些热爱用代码创造新事物, 并因此在编程跟创造中成就的人
可是编程很难, 除了创造力, 需要大量的经历去解决工程当中的难题
也可以从问题的难度印证 Hacker 们对于创造的兴趣跟渴望

Hacker Howto http://translations.readthedocs.org/en/latest/hacker_howto.html
Better programming http://www.chris-granger.com/2014/03/27/toward-a-better-programming/

Bret Victor 揭示的, 当能够非常灵活使用计算机, 人们能创造出非凡的事物
Wolfram 语言也展示出来计算机对于创造带来的强大的一面
借助代码, 人类拓展的能力可能比自然语言强大得多得多, 想象一下那时我们创造什么

Inventing on Principle https://vimeo.com/36579366

https://github.com/coffee-js/languages/wiki/Bret-Victor-Videos

Wolfram Language http://www.tudou.com/programs/view/kYqmN047ApM/

信息流动

想象一下整个世界的人编程, 参与到黑客们的创造当中, 而且他们手中工具非常强大
这时会需要人们从更高的层次去理解跟引导各种想法,技术的传播和碰撞
这时不能在用单个技术的概念去理解, 而是要当作不断流动的信息去理解

哪些信息会不断传播给所有的人, 哪些信息会提纯推送给哪部分人
怎样让信息的流动形成良好的循环不断激发新想法, 新技术, 新的创造发明
怎样让创造物获得应有的评价, 真的成为改善人类生活的一环

共享记忆

整个社区信息不断流动, 就像是想法在脑海当中碰撞, 人与人的纽带像是神经元的连接
出彩的想法高明的技术, 就像珍贵的应该闪闪发光的记忆
我们用很快的速度找到高效的办法, 推广开来, 再高效地运用起来

编程当中共享文档是好的例子, 就像人们把记忆共享, 空间换时间
而将来人们将能够共享更多的知识, 将很容易干掉别人已经解决过的问题
就像现在人们能把代码封装共享, 将来人们能把记忆封装共享

http://rosettacode.org/wiki/Include_a_file
http://zealdocs.org/