wbye / blog

maxleap blog

##日常工作总结

blog's Issues

懒人计划1

WEB前端 - “懒人”养成计划 - 1

何为懒？

       懒在人一开始的印象中，总是给人一种不好的感觉，勤奋一直是传统美德，懒是坏东西。最近看过一篇关于懒人科技的文章，觉得很有道理，文章有如下部分：

       人类历史上曾诞生了琳琅满目的懒人科技，不断迁就着人性的弱点，有汽车、火车、飞机这种大型地、颠覆式发明，也有一些非常酷炫的小型创意，甚至还诞生了不错的服务，事实上，整个第三产业的市场就是来源于“懒人不想做的事情”。这些创意在改变人类生活的同时，也改变了懒汉的定义，在拥有了大量的新鲜玩意之后，他们的境界正大有提高，事实上，懒已经不是完全意义上的贬义词，在一定程度上，代表着高逼格。

       作为一名码农，更作为一名页面仔，我只想说：哪一个程序员，不想在写代码的时候偷点懒？当然这个懒，不是指那种当个纯粹的搬运工（CTRL+C,CTRL+V大神）,而是用更少的时间去完成日常的工作任务。正是为了更“懒”、更爽、更有逼格的写代码，才有了这篇文章。

先看下前端现状

       由于近几年前端的野蛮生长以及前端应用的多元化和复杂化，整个技术形态已经跟几年前纯做页面的时代完全迥异了。主要观念的变化总结来看在于一点，现在的前端开发面向的是web app而不是web page。前端如今已经脱离了茹毛饮血、刀耕火种的原始社会，开始步入了工业时代。 感谢这个快速发展的环境，给了页面狗，一个偷懒的机会：依靠新工具，新技术，极大的提高生产力。

工欲善其事，必先利其器

一个标准页面仔的日常，应该是这样子：写写HTML，调调CSS，然后调试JS，然后页面搞定（送去给测试，发现IE bug ，哈哈）。说实话，写这个无聊的HTML，CSS，能把人写吐，或许你需要这个：

还有这样：

EMMET：前端神器，页面仔必备啊！

EMMET具体使用及下载，请参考官网 http://docs.emmet.io/

让CSS可编程，带你装逼带你飞

这年头，你要是出去面试，不知道LESS，SASS，PostCSS，你都不好意思说你是前端。可见LESS，SASS之流行。在我理解看来，一直把LESS，SASS还有其他的比如PostCSS看成一种工具，没当成语言来看待，就是为了让CSS可编程，更方便的去写CSS，更好的管理CSS，然后编译生成CSS。

当然，这篇文章不会讨论他们语法差异以及谁好谁坏，在我看来，适合自己的，适合项目的，就是好的。

SASS十分钟入门

SASS一瞥

快速创建前端静态网站 - http-server

一个命令就可以创建好一个http服务器，真是爽飞了

Github HttpServer

自动化构建工具GULP - 串起你的整个项目

GULP是个基于流的构建工具，使用nodejs实现的，这对页面仔来说，简直太棒了。使用GULP，可以完成文件压缩，JS混淆，编译SASS，LESS 等，基本上你想要的功能，都可以通过代码实现。在项目，我还用GULP来下载文件，更新本地的JSON数据。主要解决了一个自己手动下载JSON数据的问题，都是为了偷懒。。。

有关具体GULP的介绍，请参考GULP

珍惜键盘，远离F5 - Browsersync

页面仔每天做的最多的事就是，刷新浏览器，F5 or CTRL+F5 ...

试想，当我写完HTML，CSS，JS 浏览就自动刷新，这真是飞一般的感觉。Browsersync给你想要的，甚至还它还内置了移动端调试神器WEINRE，简直不要太diao。

Browsersync官网

光说不练假把式 - 手把手带你起飞

STEP-1：准备好各种环境
首先你得有nodejs环境，然后你得全局安装GULP，http-server,browsersync,如下所示：

安装超时的同学，建议使用淘宝npm源，具体可见CNPM

STEP-2：克隆我事先写好的git懒人模板仓库
git clone https://github.com/wbye/maybe_lazy_1.git

STEP-3：查看仓库README文件
在终端运行： npm install（安装超时的同学，建议使用淘宝npm源，具体可见CNPM）

完成后运行： npm run http-server ,
再另启个终端，运行： npm run bs-server

STEP-4：体验一把做懒人的感觉O(∩_∩)O

STEP-5: 懒人第一阶段完成，好了不写了，我要去好好搬砖了

前端前端

前端，想说爱你不容易！

看了标题，你可能想到这是来吐槽前端的，确实没错，但是本文并不完全是吐槽，大多都是写的最近前端开发的感受。自己从事web前端开发，这里的前端特指web前端。关于为什么要写这篇文章，起因是最近看了微信团队的最新内测的微信应用号功能。

先来看下，什么是微信应用号？

这个微信应用号是什么呢?往简单的说就是在微信的壳里面写个小应用，当然调用的都是微信提供的API，按照微信的方式来开发一个小应用。简单看了下微信案例的DEMO，代码结构很清晰，有CSS，JS，还有自定标签类似XML格式，这么看来，前端仔跑不掉了，可以来踩坑微信应用号了...

微信小程序

突然让我想起来，这个好像在哪儿见过。仔细想想，想起原先阿里前不久搞的WEEX，简直了，相似程度令我咂舌，这都是要上天的节奏？

WEEX

注：WEEX是阿里推出的一个用于构建移动跨平台的UI框架。

对比一下写法，基本**一致：用自定义的标签，结合点CSS，然后弄点JS，一组合，然后就能跑起来了。其实我的内心OS是这样的：
这样特么的也行？一个字，服！

贴上我们老大说的一段话：

目前看来, 微信这一套应该是类似 weex, 描述性语法 生成多端 native ui(因此才有 text 这种东西). 不过由于是新的语法,因此基本等于要重新写, 原有前端领域的插件/框架基本不可用. 相信其他大平台/友商(支付宝/QQ/ 百度/ xxx) 也会随即退出自己的应用号(小程序),前端阵营势必分裂,极端的情况下可能会出现专门为微信/支付宝优化的前端,即 "微信前端","支付宝前端"(类比 "iOS 前端","Android 前端") ,自行脑补. 一件生成多端 App 将是一个可以做的生意.

微信应用号到底多火？

有幸加入到一个微信应用号开发者的群，加群之火爆，只能上图了。

再看下前端发展趋势

表格布局与内联样式满天飞

最开始的web前端，都是使用table来进行布局，还有大量的内联样式，伴随着DIV+CSS布局的流行，表格布局被淘汰。现在table只是用来展示数据。

jquery一统江湖

国外有大神受够了要兼容各种浏览器，于是写了jquery来解决这些问题，随着jquery的流行，慢慢的兼容性不再是困扰前端开发的主要问题。然后随之jquery的生态圈开始完善，jquery和jquery插件接管了web前端开发的一切。

HTML5和CSS3

便随着HTML5和CSS3标准的发布和实施，仿佛让前端开发看到了前端大一统的曙光，引领前端进入一波学习H5的高潮，这个时候随便面试下，都要问你会不会H5，其实呢，他们的网站根本用不到H5。

MV**框架革命

便随着浏览器的更新，IE逐渐被淘汰，兼容性不再是问题，大神们不在只满足于操作DOM，于是又在操作DOM上又进行了封装，于是乎各种MV，MVVM...框架开始流行。

前端组件化深入人心

React的横空出世，可以说极大的促进了前端组件化的发展，各种React组件如雨后春笋般涌出。在这个时候，以前的前端的各种代码，还都是可以用的，比如jquery插件可以在React使用，只是使用方式非常的蛋疼，React也不推荐这样用。

前端大厂化?

React-Native的出现，让前端在不了解Android和iOS原生组件具体实现的情况下，可以调用原生组件。然后阿里WEEX也开源了，号称WEEX是 A framework for building Mobile cross-platform UI。然后，接下来是微信的这个微信小应用。原理和实现方式大家都是类似的，但是关键是一套代码不能在三个生态里面同时兼容，都有自己的游戏规则。感觉随着前端的发展，估计稍微大点的大厂都会搞自己的前端生态，按照自己制定好的规则去搞一套类似WEEX或者微信应用号的东西出来，让后让其他人去使用。这感觉是作死的节奏啊？NO ZUO NO DIE,NO TRY NO HIGH!

个人感受

当时最开始选择从事前端，看中的是前端简单，所见即所得，一个jquery和jquery插件就能搞定一切了。

而现在呢？现在已经远远不能了！ES6的到来也让原先简单的JS变得复杂起来。React虽然开启了组件化的快车，但是内部状态的管理也变得复杂起来，所以才有了Flux,ReFlux,Redux各种状态管理的框架。

到前不久稍微踩坑了WEEX，也发现前端要学的东西很多，然后发现发现踩不玩坑，弃之。再到现在这个微信小应用，估计前端又得踩不少坑了。可怕的是造了这么多轮子，不知道这些轮子将来的结局怎么样。

反正WEEX刚出来呢，还挺好的，现在呢？不温不火！不知道作为微信的老对手，支付宝会不会也搞个支付宝应用号，然后用weex来开发？总感觉前端的新技术就是各种推翻以前的**，然后重新来过。最后，还是苦了默默写代码的前端狗。

前端，想说爱你不容易。

结束语

套用狄更斯的一句话：前端正处在一个最好的时代，也是最坏的时代。

本文观点纯属个人见解，如有错误，请指正，如不认同，请轻喷。

参考链接

知乎WEEX讨论

微信应用号开发教程一

微信应用号教程二

微信应用号教程二

微信应用号资源汇总

微信应用号段子图片