前端从入门到加班

前言


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

Reveal.js ——程序猿的PPT


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

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

目录


  • 前端的定义
  • html & css & javascript
  • 传统前端
  • 现代前端
  • 未来前端
  • 外传1: 市场
  • 外传2: 行业

前端的定义


狭义的前端
  1. 大家所说的前端
  2. web前端
  3. html & css & js

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

广义的前端
  1. 相对于后端
  2. 与用户交互
  3. iOS & Android & 桌面端 & Web前端 & ...

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

前端三剑客


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

  1. HTML
    HTML可以类比于房子的框架,这个房子有桌子、窗、灯、柜子等物品(HTML元素),写HTML代码就是把这些东西都买回家,现在家里这些东西都有了,只是杂乱无序的堆在了一起。
  2. CSS
    接下来就是把这些东西摆放整齐了,而CSS就是干这个用的。通过写CSS代码,我们把各个物品(HTML元素)放到相应的位置,给桌子披上有颜色的桌布,调整灯管的亮度等等。
  3. 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表示可以完美兼容各种硬件设备,手机、电脑、手表甚至电视等设备,用户在不同场景,不同设备使用同一个系统,所有数据与运算全部都在云端,从此告别把文件从电脑通过微信传到手机的生活...当然这个东西很有很长的路要走。

资源


且行且珍惜

That's all. Thanks.

Poorbug@SpeedX

2016.03.26 望京.首开知语城

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,423评论 25 707
  • 前些日子从@张鑫旭微博处得一份推荐(Front-end-tutorial),号称最全的资源教程-前端涉及的所有知识...
    谷子多阅读 4,169评论 0 44
  • 大部分的后端会很很鄙视前端。我也不知道为什么,可能大部分人都会觉得脚本语言根本不算语言。 大多人 会叫我们切图仔,...
    小黑的眼阅读 3,306评论 0 15
  • 所以啊,别为自己是哪一种性格的人而纠结了,你要做的,只是努力让自己成为一个有用的人,那时你看到的世界,必然是不一样...
    雨潇阅读 186评论 0 1
  • 生活中有很多口头约定的事,我们真的履行诺言了吗,有多少人会信守约定,什么样的人会这么做,食言的人会真的受到惩罚吗?...
    生命的微笑阅读 261评论 0 0