190322&web前端开发者-修行进阶之路

web前端开发者 修行进阶之路

• 1.基础前端开发者 (5+1)
• 2.一个成熟的前端开发者 (4+1)
• 3.全栈开发工程师 (6+1)
• 4.未来或加分或必修的一些技术趋势(9)

1. 基础前端开发者 (5+1)

还是最基础的老 3 样。HTML & CSS & JavaScript

1.1 HTML & CSS

最基础的知识

• 语义化的 HTML 元素
• 基础的 CSS 语法
• Flexbox & Grid
• 浏览器开发者工具

1.2 响应式布局

响应式设计将不再是网页的加分项，而是必须的技能。

• 设置 viewport
• 非固定宽度
• 媒体查询
• 使用 rem 替代 px
• 移动优先，柱状显示

1.3 基础的部署工作

学会如何部署一个静态网站到服务器

• 注册一个域名(NameCheap, Google Domains)
• 管理共享主机或虚拟机(Inmotion, Hostgator, Bluehost)
• FTP,SFTP 文件上传(Filezilla, Cyberduck)
• 静态页面托管(Netlify, Github Pages)

1.4 SASS 预处理器

虽然不是必须的，但是推荐去学，基础知识的掌握很简单

• 结构化 CSS
• 变量
• 嵌套样式表
• Minxins & 函数
• 继承

1.5 原生 JavaScript 语法

不使用任何框架和库去学习原生的 JS 语法

• 数据类型，函数，条件判断，循环，操作符
• DOM 操作和事件
• JSON
• Fetch
• ES6+(箭头函数，Promise，async/await，解构)

1.6 满足了基本的前端开发者的条件

• 构建静态站点
• 构建 UI 布局(拿到设计图能够使用 HTML/CSS 还原)
• 添加一些交互功能
• 部署和维护网站

现在能找到最低水平的 Web 开发工作，但是这是远远不够的，看样子太符合“切图仔”的标签了。这哪行？

2、一个成熟的前端开发者 (4+1)

框架，版本控制，状态管理，开始进入我们的小舞台。

2.1 HTML & CSS 框架

• Bootstrap
• Materialize
• Bulma

2.2 Git 和其他工作流工具

Git 绝对是每一个 Web 开发者必须掌握的工具，这里也有一些其他的工作流工具的建议。

• 基础的命令行(touch, cd, mkdir 什么的总得会，命令行在下面的工具中都会用到)
• Git(版本控制)
• NPM 或 Yarn(包管理)
• Webpack 或者 Parcel(打包工具)
• Gulp 或者 Grunt(任务管理和构建工具)
• 编辑器插件(ESLint, Prettier, Live Server 等)

2.3 前端框架

学习一个前端框架在目前前端开发中是必须的。比如 React,Vue,Angular

• 在大公司开发中非常流行
• 更多的交互 & 有趣的 UI 组件
• 组件化 & 模块化前端代码
• 对团队有利

2.4 状态管理

对于使用框架的大型前端项目，你也许需要使用状态管理工具去管理你的应用级的状态

• Redux(Context API)
• Apollo(GraphQL Client)
• Vuex
• NgRx
• Mobx

2.5 满足一个成熟的前端开发者条件

• 构建一个优秀的前端应用
• 流畅和稳定的前端工作流
• 多人开发 & 熟练使用 Git
• 请求后端 API & 前端数据响应

满足以上条件，你能够顺利的找到一个前端的工作并干的很出色~ 这样看起来，还像个样子，当然如果想做全栈，请接着看。

3、全栈开发工程师 (6+1)

作为前端开发，想前后端通吃，成为全栈，得循序渐进。

3.1 学习一门后端语言

成为一个全栈工程师或软件工程师，你将需要学习一门服务端语言和相关技术
学习的顺序:

• 基础的后端语言语法
• 数据结构和工作流
• 包管理
• HTTP/路由

3.2 服务端框架

不要重复造轮子，学习一门框架去构建更好和更快的应用。

• Node.js(Express, Koa, Adonis)
• Python(Django, Flask)
• PHP(Laravel, Symfony)
• C#(ASP.NET)

3.3 数据库

绝大多数觉得应用都会使用到数据库，这里有一些选择：

• 关系型数据库(MySQL, PostgreSQL)
• 非关系型数据库(MongoDB, Counchbase)
• 云服务(Firebase, AWS, Azure, DocumentDB)
• 轻量级(SQLite, NeDB, Redis)

3.4 服务端渲染

像 React，Vue 和 Angular 等框架都可以进行服务端渲染。

• Next.js(React)
• Nuxt(Vue)
• Angular Universal(Angular)

3.5 内容管理系统

内容管理系统允许快速开发并为您的客户提供更新内容的能力，在你需要快速开发网站的时候，是很适合的，特别是对于自由开发者。

• 基于 PHP 的(Wordpress, Drupal)
• 基于 JS 的(Ghost, Keystone)
• 基于 Python 的(Mezzazine)
• 基于.Net 的(Piranha, Orchard CMS)

3.6 DevOps 和 部署

学习语言和框架是一回事，但是安装环境，测试和部署又是另外一回事。

• 部署(Linux, SSH, Git, Nginx, Apache)
• 平台(Digital Ocean, AWS, Heroku, Azure)
• 可视化(Docker, Vagrant)
• 测试(单元测试，继承测试，函数式测试，系统测试)

3.7 满足全栈工程师的条件

• 设置全栈的开发环境和工作流
• 构建后端服务 API 和微服务
• 数据库操作
• 能够独立开发应用(前端和服务端)
• 部署到云端(SSH, Git, Servers 等等)

介绍完了 Web 前端开发的进阶路程。未来或加分或必修的一些技术趋势

4、未来或加分或必修的一些技术趋势

4.1 原生应用开发

• React Native(使用 React 构建原生应用)
• NativeScript(Angular, Typescript, JavaScript)
• Ionic(HTML/CSS/JS 实现混合应用)
• Flutter(使用 Dart 语言开发原生应用的移动端 SDK)
• Xamarin(使用 C#开发的移动端应用)

4.2 使用 Electron 开发桌面应用

Electron 是一个使用 JavaScript 构建跨平台的桌面应用工具。

• 使用到了 Chromium 内核和 Node.js
• 兼容 Windows, Mac & Linux
• 崩溃报告，调试和性能分析

4.3 GraphQL & Apollo

GraphQL 是对于 API 的一种革命性新方法，查询语言比标准 RESET 严格的多

• 只查询你想要的东西
• 前端和后端可以合作得更为顺利
• 查询语句非常简单且很像 JSON 语句
• Apollo 是一个发送请求到 GraphQL 的客户端
• 使用的是 Gatsby 静态站点生成器

4.4 TypeScript

TypeScript 是一个 JavaScript 的超集，它添加了静态类型等很多特性。

• 变量，函数等类型
• 类
• 其他 ES6 的特性
• 在 Angular 中被使用到，同时也可以在 React 和 Vue 中被使用

4.5 无服务架构

无需创建和管理自己的服务器

• 使用第三服务之星“无服务功能”
• 例如 AWS, Netify & Firebase
• 在 Gatsby 静态站点生成器很流行
• 无服务框架

4.6 AI 和机器学习

AI 和机器学习已经被广泛应用在所有的程序和技术中，甚至包括 web 开发中。

• 机器学习可以允许 Web 应用程序随时间进行调整
• 虽然 AI 还有很长的路要走，但是我们会看到它会更多的用在 web 中
• 虽然目前绝大多数都是 Python 写的，但也有 Tensorflow.js 和 Brain.js 这些 JS 的库

4.7 区块链技术

现在许多公司使用区块链技术进行数字交易，因为它们更安全和有效率。

• Solidity(一门智能合约的编程语言)
• Mist(以太坊开发的浏览器，用于发送交易和合约)
• 比特币 API(可以构建 app 和整个比特币的区块链开发)

4.8 PWA

Progressive Web Apps 是一个 web app 但是在功能和样式上给用户带来原生应用使用体验的一项技术。

• 响应式
• 在离线环境下也能够提供服务
• 类似 App 的交互
• HTTPS
• 可靠，迅速，更好

4.9 Web Assembly

类似汇编的二进制格式的代码可以被浏览器执行，可以使用类似 C/C++和 Rust 等高级语言进行编写。

• 比 JavaScript 执行效率快
• 更安全 - 强制的浏览器同源和安全协议
• 开放 & 可调式

这就是所有了。感觉好长啊。真是不容易。哈哈~

期间疑问

什么是 工作流?

• 待查 工作流

什么是 微服务?

• 待查 微服务

什么是 Gatsby 静态站点生成器?

• 待查 Gatsby 静态站点生成器

参考

2019 年 Web 开发技术指南和趋势