2019 简易Web开发指南

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

工具、软件

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

前端

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

HTML & CSS

响应式布局(Responsive Layout)

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将被逐渐弱化,但是掌握一两个流行框架还是有必要的。

JS框架

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

状态管理(state management)

后端渲染(server side rendering)

开发工具

移动端

有了前端的知识后,我们还可以开发手机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实在太流行了

后端框架

数据库

CMS(Content Management System)

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

运维基础

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

其他

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,但是当所有人都开始谈论它的时候,为了好奇心也要学一下。。


半路出家老菜鸟
一个年近三十,半路出家,搬砖糊口,又做着春秋大梦的老菜鸟的小小日记。
7.1k 声望
4.1k 粉丝
0 条评论
推荐阅读
JavaScript、CSS实现鼠标跟随繁花效果
我们监听mousemove事件,当事件触发时,创建一些 div,花朵,红心和气泡作为div的背景图片。并将他们的位置设置为鼠标指针的位置,然后使用settimeout在几秒钟之后将其删除后:

CodeSteppe2阅读 2.1k

ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.8k评论 9

涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco24阅读 2.3k评论 3

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan25阅读 1.7k评论 1

封面图
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图
【代码鉴赏】简单优雅的JavaScript代码片段(一):异步控制
Promise.race不满足需求,因为如果有一个Promise率先reject,结果Promise也会立即reject;Promise.all也不满足需求,因为它会等待所有Promise,并且要求所有Promise都成功resolve。

csRyan26阅读 3.4k评论 1

「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs17阅读 2.4k

封面图
7.1k 声望
4.1k 粉丝
宣传栏