2019 简易Web开发指南

2019年即将到来，各位同学2018年辛苦了。 不管大家2018年过的怎么样，2019年还是要继续加油的！ 在此我整理了个人认为在2019仍是或者将成为主流的技术与大家分享，包括前端、后端和全栈相关。

工具、软件

欲先攻其事必先利其器，用好工具是做好开发的基础。

• 编辑器／IDE： VSCode，Sublime Text，Atom
• 浏览器：Chrome，Firefox
• 设计／原型：Adobe XD，Photoshop，Sketch，Figma
• 命令行工具：Git Bash，WSL，iTerm2，Hyper
• 版本管理：Git

前端

前端我觉得是每个做web开发的同学都应该掌握的，就算是做后端开发的，基本的前端知识也是必不可少的。

HTML & CSS

• HTML5
• CSS3
• Flexbox (简易教程)，CSS Grid (简易教程)
• CSS Variables (Custom Properties)

响应式布局（Responsive Layout）

• 设置Viewport
• Media query
• rem-based layout
• Mobile First Design

Sass

• Structured CSS
• Variables
• Nested CSS
• Mixins & Functions
• Inheritance

Javascript

• Data Types, functions, conditionals, loops, operators
• DOM操作，Events
• JSON
• Fetch API
• ES6+ (arrow function, promise, async / await, destructuring...)

HTML / CSS 框架

html／css将被逐渐弱化，但是掌握一两个流行框架还是有必要的。

• Bootstrap
• Materialize
• Bulma

JS框架

• React：目前最流行
• Vue：简单易用，越来越多人用
• Angular：曾经很流行，现在有点衰退

状态管理（state management）

• Redux
• VueX
• NgRx
• Apollo (GraphQL Client)

后端渲染（server side rendering）

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

开发工具

• 依赖管理：NPM，Yarn
• 应用打包：Webpack，Parcel
• 任务管理：Gulp，Grunt
• 编辑器扩展：ESLint，Live Server，Prettier

移动端

有了前端的知识后，我们还可以开发手机app。

• React Native：使用react开发原生应用
• NativeScript：使用Angular／TypeScript／Javascript开发原生应用
• Ionic：使用html／css／js开发混合应用
• Flutter：使用Dart语言开发原生应用
• Xamarin：使用C#开发原生应用

桌面端

甚至桌面app！

• Electron：使用chromium和node.js，兼容windows，mac，linux

后端

语言

前端同学如果想成为全栈，学一门后端语言是必不可少。

• Node.Js：就算不做全栈，nodejs也将成为前端的必备技能
• Python：如果除了web开发想往人工智能、机器学习、数据分析方向扩展的同学，python更合适
• C#：个人很喜欢的语言，非常优雅和高效
• Go：越来越流行的语言，有很强大的标准库，减轻对第三方的依赖
• PHP：虽然很多人觉得shitty，但是不得不承认太多网站都是php写的，wordpress实在太流行了

后端框架

• Node.js：Express，Koa，Adonis
• Python：Django，Flask
• C#：ASP.NET
• PHP：Laravel，Symfony

数据库

• 关系型：MySQL，PostgreSQL，MS SQL
• NoSQL：MongoDB，Couchbase
• 云存储：Firebase，AWS，Azure Cosmos DB
• 轻量级：SQLite，NeDB，Redis

CMS（Content Management System）

如果不想自己开发网站的时候，用个现成的CMS系统也是不错的。

• PHP：WordPress，Drupal
• JS：Ghost，KeyStone
• Python：Mezzazine
• .NET：Piranha，Orchard CMS

运维基础

基本的运维知识也是需要的，不然自己写个网站搞不上线多着急。

• 注册域名：Namecheap，Google Domains
• FTP，SFTP文件上传：Filezilla，Cyberduck
• 部署：Linux，SSH，Git，web服务器（Nginx，Apache）
• 虚拟化：Docker，Vagrant
• 静态托管服务：Netlify，Github Pages
• 托管共享主机 & VPS：Inmotion，Hostgator, Bluehost
• 云平台：Digital Ocean，AWS，Heroku，Azure

其他

GraphQL & Apollo

GraphQL简而言之是一种API 查询语言（QL = query language），提供了一种革命性的API实现方式。GraphQL是一种规范（specification）而不是实现（implementation）。而Apollo是GraphQL最火的实现。更多请参考：Awesome GraphQL。

TypeScript

TypeScript诞生已经有好几年了，近两年变得很火，很多框架和工具都是typescript写的，比如vscode，angular，ant-design，更多请参考 github。对于想开发框架或者库的同学typescript很值得学，但是优先精通es6+babel的开发方式。

PWA (Progressive Web Apps)

用户体验是个永恒的话题，大家都想使用体验如原生应用的网站，所以PWA是个必然的趋势。更多请参考 github awesome PWA

WebAssembly

或许WebAssembly可能不会取代javascript，但是当所有人都开始谈论它的时候，为了好奇心也要学一下。。