前端从入门到加班

2016-05-27 本文已影响876人非朽非木

前言

2916年5月26日星期四，我给公司同事做了一个前端入门分享报告，以下为会后整理总结内容。
PPT地址
本文不涉及技术相关的知识，单纯介绍前端的一些相关知识。

Reveal.js ——程序猿的PPT

首先向大家推荐 Reveal.js 这个前端库，写代码做PPT，简单易用，不会写代码的人可以做PPT，会写代码的人可以自己扩展使用。目前在 Git 上也是比较热门的一个前端项目之一。上面的PPT就是使用Reveal做的。好处有以下几点：

兼容性强（各种平台包括移动端也适用
简单易用（非技术人员也能用
可配置（主题 & 动画 & 动作...
直接上传到服务器
...

前端的定义

狭义的前端

大家所说的前端
web前端
html & css & js

狭义的前端就是大家所说的前端，其实大家所说的前端具体应该是指web前端，就是写html & css & js的人，而web前端只是前端中的一种，

广义的前端

相对于后端
与用户交互
iOS & Android & 桌面端 & Web前端 & ...

广义的前端是相对于后端而言的，与用户有交互的部分应该都被称为前端，包括iOS与安卓都算前端开发。

前端三剑客

前端三剑客就是HTML、CSS、JS，严格来说HTML与CSS并不算编程语言，因为它们不具备运算与逻辑。如果把网站类比与一个房子的话，前端三剑客（也有叫前端三驾马车）可以有以下类比：

HTML
HTML可以类比于房子的框架，这个房子有桌子、窗、灯、柜子等物品（HTML元素），写HTML代码就是把这些东西都买回家，现在家里这些东西都有了，只是杂乱无序的堆在了一起。
CSS
接下来就是把这些东西摆放整齐了，而CSS就是干这个用的。通过写CSS代码，我们把各个物品（HTML元素）放到相应的位置，给桌子披上有颜色的桌布，调整灯管的亮度等等。
JS
房子整好了，就该人入住了，JS就相当于人的角色。在人入住房子后，这个房子才有起到该有的作用——让人住，然后房子里面发生了各种故事。网页有了JS只有，网页就活了，JS为网页提供运算与逻辑，为页面提供各种可能发生的故事。

传统前端

我认为传统前端开发指的是前端早期阶段，其实这个早期指的是并不是很久的以前，可能也就是三五年前。这个阶段的前端开发有以下几个特点：

设计师的工具
前端很low
非常依赖jQuery
没有工程思想

前端开发因为入门容易，因此甚至很多非开发人员也从前端切入互联网圈（各种培训班），这些人中的大部分人直到今天也仍然停留在传统开发模式，导致现在前端界人力过剩（同时人才紧张）的局面。

AJAX

Asynchronous Javascript And XML
我认为AJAX算是现代前端的萌芽，是前端开发的一个里程碑，有承上启下的作用。

现代前端

现代前端开发也就是这两年的事，大概是从14年开始吧，前端圈开始呈现井喷的发展局势。原因之一是因为互联网的大量覆盖与带宽提升。

html5 & css3
虽然早在html5和css3标准制定（2015年）之前，前端已经开始飞起来了，但是这个事件让前端在名义上真正上天了。html5和css3的出现，让网页有了更强大的展示与交互能力，最大的冲击莫过于Flash直接崩盘。
Angular & React & Vue & Bootstrap & ...
各个层面，各种体量，各有长处的框架接踵而来，你还没唱完我就把你赶下台，去年我还在学习Angular，今年大家都在玩React了；最近几天Vue又盘踞在Git前列了。
Grunt & Gulp & Webpack & ...
围绕着前端开发的各种工具也在快速的迭代着，Gulp凳子还没坐热，Webpack就来抢市场了。
Sass & Less & ...
前端三剑客齐头并进，可编程的CSS——Sass与Less也应运而生。

在各个端，各个领域，前端也在慢慢地渗入与腐蚀其他开发语言的领地，并且在程序猿社区引起了热烈的讨论。

桌面端： Electron
移动端： Ionic & React Native & ...
服务端： Node
模块化：CommonJS & SeaJS & Webpack & ...
增强版：Dart & Typescript & ...
编辑器：Webstorm & sublime & atom & ...
排版领域： Markdown

优势

不用build, 不用编译
无需环境，不用配置
write once, run anywhere
异步就是快
想上就上（不用发版

劣势

需兼容webview（从IE坑跳到微信坑
松散型
所有变量都是var & 先使用后声明...
更新迭代太快（对前端而言是好事，对开发人员而言就不是了
+客观局限性
包括硬件性能与带宽。复杂的交互下网页会出现卡顿现象；而页面如果体积太大（高清图片等元素），打开则需要很长时间并且需要耗费很多流量。

两个有意思的js项目

GBA.js
OS.js
Git上还有数不清的各种有意思的前端项目。

未来前端

一切皆在云端

云计算
网络存储的价格下载，网络接入成本下降，网络费用价格降低，于是服务器厂商也愿意推动云计算，网络提供商也愿意提供云计算服务，用户也愿意把数据存在云端，于是皆大欢喜，甚至思科也整出了雾计算。此时前端作为入口，在短期内还是会继续翻滚。
Chromebook
Chromebook可谓是前端圈的好伙伴，虽然在国内根本见不到影子，但是凭借着低价与好用两大武器，在教育市场上也是占据一把交椅，今天早上(2016.5.26)的新闻显示Chromebook的销量已经超过了Mac(Unbelievable?)。
阿里
阿里的前端团队在国内是首屈一指的，甚至国际上。国内大量前端人才往那边流去的同时阿里也在大力推动着前端界的发展。

市场情况

学校不教
学生嫌弃
前端很多
人才很少
还有一群被需求给吓跑的
but ...
需求巨大 & 待遇优厚

很多并没有开设前端相关的课程（反正各种培训机构教网页制作），学生对前端的认识也不够多，大部分圈外人士对前端的看法还停留在传统前端的阶段，因此导致前端圈出现断层的现象，大部分人都是从那个其它开发岗位，甚至是非开发岗位转过来的，目前市场的人才数量并不能满足需求。

行业

浪潮之巅
我们很幸运地进入这个行业，成为时代的宠儿，虽然加班很多很累，但是至少衣食无忧，过得比其它行业好。但是按照发展规律，到顶峰就该开始下滑了，这从去年（2015）下半年至今资本遇冷，泡沫搜索页可以看出来，行业逐渐趋于稳定（虽然现在还是很浮夸）。
生物自行车
如果互联网走下神坛（可能会是很久以后的事吧），那么总有人来接盘，不然资本往哪去。AphalGo出现后机器人有了大脑了，因此接下来它们该有身体了，生物工程该登场了。或许在二三十年后，我们的儿子女儿们在造的玩意儿就是一辆会呼吸，会思考的生物自行车。

免费总送

jQuery 10+
jQuery 应该是大多数人的前端启蒙，刚过完十周年生日，紧接这就发布了3.0版本。现在jQuery并不是Geek们讨论的对象，但是它仍然占据着互联网的半壁江山，毕竟连Angular这种颠覆性的东西都内置了jQuery Lite。目测jQuery再战10年毫无压力。
程序猿从娃娃抓起
如果谁家孩子想学编程，我第一个推荐的就是从前端入手。上手容易，无需环境，不用配置。
Anywhere OS
Anywhere OS是一个云端操作系统，我从大二就开始幻想这个东西。Anywhere表示可以完美兼容各种硬件设备，手机、电脑、手表甚至电视等设备，用户在不同场景，不同设备使用同一个系统，所有数据与运算全部都在云端，从此告别把文件从电脑通过微信传到手机的生活...当然这个东西很有很长的路要走。