一、基础者

1.1 HTML & CSS

最基础的知识：

语义(yi)化(hua)的(de)HTML元素

基础的CSS语法(fa)

Flexbox & Grid

CSS变量

浏览器(qi)开发者工(gong)具

1.2 响应式布(bu)局

响应式设计将不再是网页(ye)的加(jia)分项(xiang), 而是必须的

设(she)置viewport

非固定宽度

媒体查询

使用 rem 替代 px

移动优先,柱状显(xian)示

1.3 基础的部署工作

学(xue)会如何部署一个(ge)静(jing)态网站到服务器

注(zhu)册一(yi)个域名(NameCheap, Google Domains)

管理共享主机或虚拟机(Inmotion, Hostgator, Bluehost)

FTP, SFTP 文件上传(Filezilla, Cyberduck)

静态页(ye)面托管(Netlify, Github Pages)

1.4 SASS预(yu)处(chu)理器

虽然不(bu)是(shi)必须(xu)的, 但(dan)是(shi)推荐去学(xue), 基础知识的掌握很简单

结构化CSS

变量

嵌套样式表

Minxins & 函数

继承

1.5 原生语(yu)法(fa)

不使用任何(he)框架(jia)和库区(qu)学习原生的JS语法(fa)

数据类型(xing), 函(han)数, 条件判断, 循环(huan), 凑总府

DOM操作和事件(jian)

JSON

Fetch

ES6+(箭头函数, Promise, async/await, 解构)

1.6 满足(zu)了(le)基本的前端开发者的条件

构建静态站点

构建UI布局(拿到设计图能够使用HTML/CSS还原)

添加一些交互功能

部署和维护网站

现在能找到(dao)最低(di)水平的(de)工作, 但是这是远远不够的(de)....

二、一(yi)个成熟的前端开(kai)发(fa)者

2.1 HTML & CSS框架

HTML/CSS框(kuang)架(jia)(jia)目前没有以前那么有意(yi)(yi)义(yi), 但是我还是介意(yi)(yi)你选择一个学(xue)(xue)习(xi)(这里(li)作者(zhe)想隐射的(de)应该是, 在jquery时代, HTML/CSS框(kuang)架(jia)(jia)的(de)学(xue)(xue)习(xi)是必(bi)须的(de)).

BootStrap

Materialize

Bulma

2.2 Git和其(qi)他工(gong)作流(liu)工(gong)具(ju)

Git绝对是每一个Web开发者必须掌(zhang)握的工具, 这里(li)也有一些其(qi)他的工作流(liu)工具的建议.推(tui)荐：超详细的 Git 实战教(jiao)程。

基础的(de)命令(ling)行( touch, cd, mkdir什(shen)么的(de)总得会, 命令(ling)行在(zai)下(xia)面(mian)的(de)工(gong)具中都会用到(dao))

Git(版本控制)

NPM 或 Yarn(包(bao)管理(li))

Webpack 或者 Parcel(打包工(gong)具(ju))

Gulp 或者(zhe) Grunt(任务管理(li)和构建工具)

编辑器插件(ESLint, Prettier, Live Server等)

2.3 前(qian)端框架(jia)

学(xue)习(xi)一个前(qian)端(duan)框架在(zai)目(mu)前(qian)前(qian)端(duan)开发中是必须的.

在大公(gong)司开发(fa)中非常流行

更多(duo)的(de)交互 & 有趣的(de)UI组件

组件化 & 模块化前端(duan)代码

对团队有利

2.4 状态管理

对于使(shi)用框架(jia)的大型前端项(xiang)目(mu), 你也许需要使(shi)用状(zhuang)态管理工具去管理你的应用级的状(zhuang)态

Redux(Context API)

Apollo(GraphQL Client)

Vuex

NgRx

2.5 满(man)足一个(ge)成熟的(de)前端开发者(zhe)条件

构建一个优秀的(de)前端应用

流(liu)畅和稳定(ding)的前端(duan)工(gong)作(zuo)流(liu)

多人开发 & 熟练使用Git

请求后端API & 前(qian)端数据(ju)响应

满足(zu)以(yi)上条件, 你能够顺利的找(zhao)到(dao)一(yi)个前端的工作并干(gan)得很出(chu)色~

三(san)、全(quan)栈开发工程师

3.1 学习一门(men)后端(duan)语言

成为一(yi)个全栈工(gong)程(cheng)师(shi)或(huo)软件(jian)工(gong)程(cheng)师(shi), 你将需要(yao)学习(xi)一(yi)个服务端语言和相关技术

学习的顺序:

基(ji)础(chu)的后端(duan)语言(yan)语法

数据结构和(he)工(gong)作流

包管理

HTTP/路由

3.2 服务端框架(jia)

不(bu)要重复造轮(lun)子, 学习(xi)一门(men)框架去构建(jian)更好和更快的(de)应用(yong)

Node.js(Express, Koa, Adonis)

Python(Django, Flask)

PHP(Laravel, Symfony)

C# (ASP.NET)

3.3 数据库

绝大多(duo)数(shu)觉(jue)得应用都会使用到(dao)数(shu)据(ju)库(ku), 这里有一些选择(ze):

关系型数据库(My, PostgreSQL, MS SQL)

非关系(xi)型数据库 (MongoDB, Counchbase)

云服务 (Firebase, AWS, Azure, DocumentDB)

轻量(liang)级(SQLite, NeDB, Redis)

3.4 服务端渲染

像React, Vue 和 Angular等端架(jia)都可以进行服务端渲染(ran)

Next.js(React)

Nuxt(Vue)

Angular Universal(Angular)

3.5 内容管理(li)系统

内(nei)容管(guan)理系(xi)统允许(xu)快(kuai)速开发并(bing)为您的(de)(de)客(ke)户提供(gong)更新内(nei)容的(de)(de)能力. 在你(ni)需要快(kuai)速开发网(wang)站(zhan)的(de)(de)时(shi)候, 它们是很适合的(de)(de). 特别是对于自由(you)开发者.

基于PHP的(de) (Wordpress, Drupal)

基于JS的 (Ghost, Keystone)

基(ji)于Python的(de) (Mezzazine)

基于.Net的(de) (Piranha, Orchard CMS)

3.6 DevOps 和部署(shu)

学习语言和(he)(he)框架是(shi)一(yi)回事(shi), 但(dan)是(shi)安装环境, 测试和(he)(he)部署(shu)有(you)事(shi)另外一(yi)回事(shi)。

部署(shu) (Linux, SSH, Git, Nginx, Apache)

平台 (Digital Ocean, AWS, Heroku, Azure)

可视化(hua)(Docker, Vagrant)

测(ce)(ce)(ce)试 (单元测(ce)(ce)(ce)试, 集成测(ce)(ce)(ce)试, 函数(shu)式测(ce)(ce)(ce)试, 系(xi)统测(ce)(ce)(ce)试)

3.7 满足全栈工(gong)程师的条件(jian)

设(she)置全(quan)栈的开发环境和(he)工作(zuo)流(liu)

构建(jian)后端服(fu)务API和微服(fu)务

数据库操作

能够(gou)独立开(kai)发应用(前端(duan)和(he)服务端(duan))

部署到云端(SSH, Git, Servers等等)

四、2019技术趋势和其他

4.1 原生(sheng)应用开发

React Native(使用(yong)(yong)React构建(jian)原生应用(yong)(yong))

NativeScirpt(Angular, Typescript, Script)

Ionic (HTML/CSS/JS 实(shi)现混合应(ying)用)

Flutter (使用Dart语言开发(fa)原生应用的移动端SDK)

Xamarin (使用C#开发的移(yi)动端(duan)应用)

4.2 使用Electron开发桌面应(ying)用

Electron是一(yi)个使用JavaScript构建跨平台的桌面应(ying)用工具.

使用到了(le) Chromium内核(he)和Node.js

兼容Windows, Mac & Linux

崩溃报告, 调试和(he)性能(neng)分(fen)析

4.3 GraphQL & Apollo

GraphQl是对于API的(de)一种革(ge)命性新(xin)方(fang)法，查询语(yu)言比标准RESET严格得多(duo)

只查(cha)询你想要(yao)的东(dong)西

前端(duan)和(he)后端(duan)可以合作(zuo)得更为(wei)顺利

查(cha)询语(yu)句(ju)非常简(jian)单(dan)且很像JSON语(yu)句(ju)

Apollo是一(yi)个发送(song)请求到GraphQL的客户端

使用的是Gatsby静态站点生成器

4.4 TypeScript

TypeScript是(shi)一个(ge)JavaScript的超集, 它(ta)添加了(le)静态类型等很多(duo)特性(xing).

变量, 函数等类型

类

其他ES6的特性

在(zai)Angular中被(bei)使用(yong)到, 同时也可以在(zai)React和Vue中被(bei)使用(yong)

4.5 无服务架(jia)构

无需创建和管(guan)理自己(ji)的服务(wu)器

使用第三服(fu)务执行“无服(fu)务器功(gong)能”

例如 AWS, Netify & Firebase

在Gatsby静态站点生成(cheng)器很流行(xing)

无服务框架

4.6 AI和机器学习(xi)

AI和机器学习已经被广泛应用在所有的程序(xu)和技术中(zhong), 甚至包括中(zhong).

机器学习可以允许(xu)Web应用程序随时间进(jin)行调整

虽然(ran)AI还(hai)有很(hen)长的路要走, 但(dan)是(shi)我(wo)们会看到它(ta)会更多的用在web中(zhong)

虽然(ran)目前绝(jue)大多数都(dou)是Python写的(de), 但也有Tensorflow.js和Brain.js这(zhei)些JS的(de)库(ku)

4.7 区(qu)块(kuai)链技术

现(xian)在许多(duo)公(gong)司(si)使(shi)用区块链技术(shu)进(jin)行(xing)数字(zi)交易, 因为它(ta)们更安全(quan)和(he)有效率(lv).

Solidity(一门(men)智能合(he)约的编程语言)

Mist(以太坊开发的(de)浏览器, 用于发送(song)交易(yi)和合约)

 比特(te)币(bi)API(可以(yi)构建app和(he)整(zheng)和(he)比特(te)币(bi)的(de)区块链(lian)开(kai)发)

4.8 PWA

Progressive Web Apps是一(yi)个web app但(dan)是在功能和样(yang)式上(shang)给用户(hu)带来原(yuan)生应用使用体验的一(yi)项(xiang)技术.

响应式

在(zai)离(li)线环境(jing)下也(ye)能够提供服务

类似(si)App的交互(hu)

HTT

可靠, 迅速, 更好(hao)

4.9 Web Assembly

类(lei)似(si)汇编(bian)的(de)二(er)进制格式的(de)代码可(ke)以被浏览器执(zhi)行. 可(ke)以使用类(lei)似(si)C/c++和Rust等高级语(yu)言进行编(bian)写.

比JavaScript执(zhi)行效率快(kuai)

更安(an)全 - 强制的浏(liu)览器同源和安(an)全协议(yi)

开放 & 可调试

以上就是2019 - Web开(kai)发技术指南(nan)和趋势的全部内容，希望对你有(you)所帮助(zhu)。