前端概论

自我介绍

2016年4月摄于台湾宜兰

我叫翟路佳

花名肉山，英文名 Meathill

热爱编程，喜欢分享。2006年开始做前端，切过图，写过 Flash 游戏。近几年创业，转向全栈。现居广州。

以下是我的联系方式：

课程介绍

“个人网站”开发实战

本套课程着重讲授“现代化前端开发”的常用技术、常用工具。

主要面向：

1. 有一定前端工作经验，寻求提升技能和视野
2. 有其它方面工作经验，来拓展前端技能树

我假设各位观众：

1. 熟练使用电脑
2. 受过基础编程训练
3. 具备一定英文基础
4. 了解 HTML，知道 CSS，能看懂 JavaScript

什么是前端？

• 靠近用户的，界面逻辑和交互逻辑的部分，是前端
• 靠近数据的，数理逻辑和业务逻辑的部分，是后端

课程中的定义：

• 以 HTML、CSS、JavaScript 等 Web 技术为载体
• 开发内容为直接交付用户使用的网站、应用
• 运行在浏览器或者 Webview 当中

前端的现状

前端招聘市场是火热的。

市场需求巨大

1. 8亿互联网用户
2. 标准、通用、且免费
3. 用户越来越高的期待

供给相当低迷

1. 学校教的少
2. 学校教的落后
3. 门槛低，入行容易，提升困难

1. 起步晚

现代化的前端，诞生于2005年《网页重构》一书出版。

更深层的原因是：经过几年发展，浏览器已经很强力了，但是应用还没跟上。

这本书告诉大家，其实网页可以做的更好。

起步晚的结果：

1. 学校难以跟上
2. 场面混乱，各路英豪涌现
3. 缺少工业标准

对前端人员的影响：

1. 学校不教 -> 需要自学
2. 场面混乱 -> 需要不断尝鲜
3. 缺少标准 -> 尽量多了解，积累兼容性经验

2. 基于浏览器

有 好处，也有 坏处

坏处

1. 性能不佳
2. 能用什么资源一看设备、二看浏览器
3. 用户对打开速度很敏感
4. 需要掌握多种语言+多种工具
5. 浏览器存在兼容性差异
6. 新特性需要等待用户升级

好处

1. 跨平台
2. 使用成本低，会有更多用户
3. HTML 和 CSS 入门很容易

3. 标准・通用・免费

W3C——“唯一”的标准制定者

几乎在任何平台，都能找到比较完整的实现。

这些东西是免费的，完全不用担心版权。

“标准・通用・免费”的结果：

1. 大大降低成本
2. 大大降低产品价格
3. 大量个人、组织使用 Web 平台提供产品
4. 大量用户在 Web 平台上消费产品。

现代化前端开发

“现代化前端开发”，就是利用各种框架、库、工具，弥补各种不足，突破各种限制的“前端开发”。

问题1：HTML 和 CSS 编程性差

解决方案：

1. 模板引擎
   1. Handlebars
   2. Jade
2. CSS 预处理工具
   1. Sass
   2. Less
   3. Stylus

问题2：JavaScript 没有包管理

解决方案：

AMD CMD CommonJS

1. require.js
2. sea.js

打包工具

1. browserify
2. webpack

问题3：用户对打开速度敏感

解决方案：

1. 提升首屏打开速率
2. 压缩文件体积
3. 使用 CDN，增加域名

问题4：浏览器兼容性问题

解决方案：

1. 使用框架
   1. Bootstrap
   2. Polyfill
   3. Babel
2. 针对特殊浏览器写特殊代码

兵来将挡，水来土掩。

现代化前端开发光明无限。

学习现代化前端开发，请关注我的教程。

基础工具选择

工欲善其事，必先利其器。

为了接下来的课程，我们需要先准备以下工具：

1. 开发工具

VSCode

非常好用的 IDE，插件丰富，开源免费。

官网地址 下载地址

其它可选：Webstorm

2. Node.js 环境

开发调试必须

下载地址

3. 浏览器

Chrome

快速，强大，更新及时，开发者工具非常好用。

下载地址