daydreamy / skill-tree

用于积累个人关注的资源

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

技术栈

个人资源积累,✭ 号表示强烈推荐

下面按 Web 开发步骤反复梳理文档:


学习

学习开发必备技能,科学上网

若要紧追趋势,下面是一波快捷通道

无论做何种开发,都有规范可遵循,也是获取相应知识的第一手资料

不同的开发语言决定了后续技术栈的选用

一些知识点可以辅助透彻理解开发的各个环节

有些站点提供了系统的学习资料

有些站点提供教程

有些站点用游戏的方式来教学

有些文章在探索一些新技巧

有些文章指明了可能存在的坑

有些文章提供方法论

刷面试题也是个不错的知识点收集方式

有时开发语言并不能直接在环境中执行,我们需要了解语言适配环境的范围

部分方法浏览器不兼容,我们可以配置执行环境来提供还未支持的方法

部分方法各个浏览器支持的方案不一致,用工具方法来兼容

  • handjs pointer events polyfill 手势库

也可以通过编译工具,将写好的代码转变为执行环境可以直接执行的代码

开发过程是一个组织数据与执行环境交互的过程,我们需要知道执行环境能做什么,比如浏览器都有哪些能力

有时执行环境存在兼容性问题,我们需要知道区别在哪里

确定项目开发时,需要知道浏览器市占率

规划

工欲善其事必先利其器,准备好开发环境

写代码前,我们最好制定好开发规范,确保代码看起来不会太杂乱

需要给代码准备好版本控制工具,便于随时回退

项目的版本管理,也需要遵循规范

如果要做开源项目,还需要了解下开源协议

我们需要设计工具来提供界面原型

需要协作工具来管理团队

现代开发流程中,我们往往期望借助开源社区提供直接使用的包资源

部分代码不是直接在浏览器执行的,而是需要编译后再执行,有些代码是需要进行编译优化

准备好代码编辑器,要开始写代码了

开发

首先需要为业务类型来选择一个技术栈

jQuery

React

VUE

GOOGLE

微信小程序

客户端开发

  • cordova PhoneGap/Cordova Hybrid App
  • appcan 国内 Hybrid App
  • react-native React 跨平台 app 开发工具
  • NativeScript 跨平台 app 开发工具
  • weex vue 跨平台 app 开发工具
  • flutter 基于 Dart 的 app 开发框架,来自 Google

桌面应用开发

Node 开发

Deno 开发

代码要有存储的地方

集成

现代开发,你自己的代码可能只占应用总代码量的 1%

界面开发,样式先行

安全是开发中非常需要注意的地方,不安全的项目有可能摧毁一切业绩

web开发常用一些图标与字体,有一些服务与工具可以提供一些现成资源

移动开发有些知识点,可以辅助我们提供更好的用户体验

操作数组,操作对象,对基础数据的一些*操作都有工具支持

  • underscore 老牌工具库
  • lodash 更为现代的工具函数库
  • lazy 延迟计算的工具函数
  • collect 处理 JavaScript 中的数组和对象

一些工具能够辅助开发流程,提供各种助力

接口访问是 web 开发最常用到的运行时能力之一

使用现成的UI库来加速开发

多媒体展示

业务中有时用到文本编辑器

  • slate 现代富文本编辑器,与 React 集成性很好
  • quill 现代所见即所得编辑器
  • draft-js 基于react的编辑器
  • CodeMirror 代码编辑器
  • mathjax 公式编辑器

动画

实用工具

模板引擎

数据可视化

路由

文件上传

Node - 数据库

  • sharedb 用于解决多人编辑问题的数据库

后台服务需要做好日志管理

即时通讯

前端杂七杂八

Node 后台杂七杂八

结合一些云服务,产品能力可以得到增强

一些开发**和对应的工具可以帮助重新梳理代码,例如函数式编程

有些业务有可能会用到比较复杂的算法

有些技术可以帮助我们让性能和体验上一个台阶

调试

项目开发过程中,我们希望将一些步骤自动化,使用任务工具来封装

  • gulp
  • grunt
  • execa better child_process
  • ora 命令行loading
  • vorpal 创建交互式CLI的框架
  • vantage 将一个应用转化为命令行交互工具

打包与编译已经成为前端必备的自动化流程,有现成的工具可供直接使用

调试是开发的重要环节,用一些工具来优化调试效率

测试

开发中,我们需要代理一些接口,便于集成本地调试环境

有时,我们需要模拟部分数据,来暂时替代部分接口返回的数据

我们需要写一些自动化测试,来保障项目的可靠性

  • mocha 前端测试框架,既可以用于浏览器端,也可以用于服务器端
  • karma 测试自动化
  • nightwatchjs UI测试自动化
  • macaca 多端自动化测试解决方案
  • cypress 基于 chrome 的e2e测试

一些自动化任务,我们不想在本地执行,就需要用到持续集成

开发的响应式界面,是否良好适配了各个屏幕

一些任务需要在浏览器环境执行,所以我们需要无界面浏览器在持续集成环境运行

  • puppeteer 无界面 blink 内核浏览器,google 出品
  • phantomjs 无界面 webkit 内核浏览器,作者已宣布停止维护

总有类似的新项目,可以包装一个脚手架,供其他项目使用,也有一些现成的脚手架

部署

代码部署上线,需要有一个服务器环境

现在一些服务不再直接部署到物理机上了,而是使用 docker

无论远程还是本地服务器,我们都需要一个良好的命令行环境

有一些工具可以我们开发更好的用工具来管理命令行界面

有些工具让命令行输出更漂亮

项目上线后,我们需要建立监控,来保障业务稳定性

  • sentry 日志管理与质量监控
  • BetterJS 原名 BadJS
  • pandora 专业的 Node.js 应用监控管理器,阿里开源

开发后台服务,需要提供运维工具

觉得性能有问题?有些文章提供了指导

文档

项目开发完,需要写文档

分享

写完文档,还需要写例子来展示代码

  • codepen 更适合编写showcase,在线编辑比较方便,各种预处理器齐全
  • codesandbox 谷歌部分项目在用,看界面感觉不错
  • jsbin 老牌代码展示服务
  • jsfiddle 访问感觉比较缓慢,但属于老牌代码展示工具,对于代码展示功能齐备
  • sololearn SoloLearn是一个在线游乐场,可让你测试HTML,CSS和JavaScript代码
  • jsrun 国内版 codepen,访问速度快

有些例子还想来录制 gif ,分享动态画面

  • asciinema 终端命令行录制工具
  • repl 在线开源交互执行平台,可以演示在服务端运行的代码,jest在用
  • licecap 屏幕操作录制 gif

积累

总结了开发流程,我们会试图建立一个开发体系来优化流程

经典开源社区 GITHUB 提供了大量轮子

时常关注下 awesome 系列,可以有效了解业界发展趋势

个人日常积累一些代码,有时会起到重要作用

个人积累可以转化为自己的文章

  • 个人博客搭建

还可以DIY一个配偶

资源

外包

其他


待整理

About

用于积累个人关注的资源

License:MIT License