杭州ui培训
达内杭州ui培训中心

0571-56020830

热门课程

2018年前端哪些技术更流行

  • 时间:2018-10-25 13:51
  • 发布:杭州UI培训
  • 来源:疑难解答

2018年前端哪些技术更流行呢?今天我们来探讨一下。

前端开发我在用到的其他类库,技术选择和工具还包括:

  1. SCSS – CSS 预处理,提供 Variables, Mix-in 等功能

  2. ESLint – JavaScript 代码质量工具,之前使用 airbnb 配置方案,现在使用 standard 配合方案

  3. StyleLint – CSS/SCSS/Less 代码质量工具

  4. EditorConfig – 统一编辑器配置

  5. git – 版本控制工具,结合 git-flow 做分支管理

  6. oh-my-zsh – 提高终端操作效率

  7. Ant Design – React 组件库,适合中后台应用开发,极大提高开发效率。另外一个可以参考的是 Material UI,是 Google Material Design 的 React 实现。

  8. Ant Design Pro – 基于 Ant Design 的中后台项目脚手架,提供了更高层的常用业务组件和更佳实践,大大减少重复性工作

  9. Animate.css – 流行的动画样式库,实现了包括 Attention(吸睛?),Bouncing(弹跳),Fading(淡入/淡出),Flippers(翻转),Lightspeed(光速?),Rotating(旋转),Sliding(滑动),Zoom(缩放)等各种动效。

  10. Alloy Touch – 丝般顺滑的触摸运动方案(官方原文),支持缓动效果,使用了 matrix-3D(transformjs),requestAnimationFrame 以及针对 touchmov 事件的优化({ passive: false, …}),体验与原生非常接近。同时支持各种触控场景:2D/3D 旋转,翻页,步进。我还用它实现了无限滑动的效果。还有一个非常流行的 swiper( nolimits4web/swiper ),但是我没有用过。不知道跟 Alloy touch 的区别。

  11. AutoPrefixer – PostCSS 插件,构建时根据 caniuse-lite 数据库以及你设置的或者默认的浏览器列表(browserslist)给 CSS 属性自动增加浏览器厂商前缀。一般结合 gulp 或者 webpack 等 Task runner 使用。这样我们写 CSS 样式的时候只需要写纯 CSS 而不需要考虑厂商前缀的问题。

  12. Async Flow Control – JavaScript 的异步流程控制,大概经历了 callback -> Async.js -> Promise(bluebird -> 原生 Promise 支持) -> yield/generator -> async/await(ES7) 这样一个过程。推荐 async/await + promise 的解决方案,Node.js 现在(8+)也可以用 Util.promisify() 对原先的 callback API 进行封装成 Promise。

  13. Axios – 基于 Promise 的 HTTP 客户端,可以运行于浏览器和 Node.js 环境。我主要是在 Node.js 中使用 Axios,替代了 request;浏览器中还是使用 Fetch API,还没有在浏览器中尝试使用 Axios。

  14. Babel + ES6/6+ – 现代 JavaScript 语法和编译器,Babel 可以让你使用目前主流浏览器尚未全面支持的新的 JavaScript 语法来编写代码,同时帮你编译成现代浏览器都支持的 ES5 语法,还提供了一些 polyfill (通过 core.js)实现了浏览器不支持的 feature。

  15. Ava, Chai.js, Jest, Enzyme, Headless Chrome – 测试框架,runner,断言库,单元测试,组件测试,端对端测试的一些工具。我用 Ava 替代了 Mocha 用来做测试框架和 Runner,Headless Chrome 替代了 PhantomJS 做端对端测试,断言主要用 Chai 里面的 expect 以及 jsonschema 等 Chaijs插件。

  16. CSS Modules – CSS 模块化方案,避免全局作用域/冲突,实现显式依赖。暂时没有使用 css-in-js 方案。

  17. Data Visualization – 数据可视化和一些图表工具,使用多的还是 ECharts,支持各种图表,交互和渲染模式,PC 端移动端通吃,文档很全,最近还成为了 Apache 孵化项目。另外还用过 g2,感觉也不错,现在也能看到源码了。g2 是 grammer of graphic 的缩写,算是 g2 的理论基础。自己从基础做起的话,可以使用 d3.js,提供了可视化的很多基础模块,基于 SVG。

  18. Docker – 嗯,前端应用部署也可以使用 docker,基于 Nginx image 或者 Node.js image。我以前写过一个构建 docker 的 shell 脚本: 分享一个自动构建 docker 并导出 image 的 shell 脚本

  19. esprima, espree, acorn, babel-parser – 进行 JS/JSX 语法解析和句法分析的 JS 库。espree 是 ESLint 使用的 parser,最初 fork 自 Esprima,后来基于 Acorn。Esprima 是老牌的 js parser,现在使用 TypeScript 实现;Acorn 使用 ES6,特点是模块化,但是 Esprima 的文档比 Acorn 相对要全一些。babel-parser 的解析器 fork 自 Acorn。

  20. Express.js/Koa2/Egg.js/Strongloop – Express 和 Koa 都是 Node.js 的 Web 框架,主要用来实现 API 网关,也可以 serve 一些静态内容。我用过时间长的是 Express, koa2 也在几个项目中用过,也了解过 loopback, hapi, kraken 等。推荐直接使用 Egg 或者 Strongloop 这种封装了更佳实践的企业级 Node.js 框架,而不是自己基于 express 或者 koa 攒一堆组件。

  21. Functional Programming – 函数式编程,这个真的是前端流行… 还有纯函数,pure render, pure component,immutable 等概念。参考:lodash 中的 FP 实现。嫌 immutable.js 太重可以试试 immer。

  22. GraphQL/thrift/RESTful API/OpenAPI – 各种接口方案。REST 有一种明日黄花的感觉,虽然还在用,但是感觉早晚被 GraphQL 等取代,毕竟我们真的越来越不关心数据是如何获取的,而应该关注在 store 如何设计上,专注在领域分析上面。Thrif 支持跨语言 RPC 调用,比如跨 Node.js 和 Java 等。嗯,Thrif 支持自动生成桩代码,什么定接口、JSON、MOCK 就都是浮云了,不需要纠结是否符合 RESTful 规范了。NOTE:Github 提供的 API 之前是 RESTful 的,现在都是 GraphQL 了。

  23. Homebrew – MAC 软件包管理工具,brew 相当于 Ubuntu 的 apt,RedHat/CentOS 的 yum。

  24. lodash/moment.js – 常用的两个 JS 库了,lodash 是一个现代、高效、模块化的 JS 功能包,moment.js 主要用来处理日期时间相关的操作。都是即可运行在浏览器环境,也可以运行在 Node.js 环境。

  25. MongoDb/MySQL/Nginx/Redis – 这些都是常用的服务器应用。MongoDB 使用 mongoose,MySQL 使用 sequelizer(都是非常优秀的 Node.js 的 ORM 实现),Nginx 会配置反向代理,URL 重写,缓存设置等即可。

  26. npm/yarn – 包管理工具。我倾向于还是使用 npm,搞清楚 npm 的常用 script;搞清楚npm install 时候依赖安装的流程,以及 package-lock 的作用;能维护和发布自己的 npm 包;知道 npx 是干什么的就可以了。

  27. Performance – 前端性能,善用 Chrome Devtool 中的各种功能,包括 lighthouse。

  28. PostCSS – 本身是一个 CSS 的 parser,最早是从 AutoPrefixer 中抽取出来的,现在已经是 CSS 的瑞士军刀了。可以结合 gulp, Webpack 等 task runner 使用,能够解析 CSS/SCSS/Less 等各种语法,提供了 AutoPrefixer(加浏览器前缀), cssnano(各种严压缩,各种配置), cssnext(用未来的 CSS 语法规范写当前浏览器支持的代码), css moudles(模块化),variables, mix-in(类 SCSS 的预处理支持)等各种丰富插件…没有你还可以自己写(提供插件 boilplate)!

  29. React Native/Flutter – 跨端方案。最近关于 RN 是否凉了?如何评价 Flutter?的问答挺多的,我更关注的可能还是了解他们是如何实现的,以及解决了什么问题吧

  30. source maps – 了解 js、css 的 source maps 是如何生成的,相应的规范,在浏览器、生产环境调试、以及异常追踪系统里面的使用。

  31. TypeScript – 用 TS 实现的项目越来越多了,特别是一些大型项目,流行程度也是越来越高

  32. WebSocket – 需要长连接、实时通信的场景

  33. WebStorm/VS Code – IDE/编辑器,使用较多的就是用这两种了

上一篇:“审美”不好的人能学习UI设计吗
下一篇:什么样的人适合学习UI设计
选择城市和中心
贵州省

广西省

海南省