front-end-study-guide icon indicating copy to clipboard operation
front-end-study-guide copied to clipboard

Published 20 hours ago • verified publisher icon alcat2008
→

Metadata

前端学习指南

前端学习指南

技术是一种载体，在它之上是对整个体系的认知，如何精进呢，Winter 的文章 一个前端的自我修养 ，不容错过！

学习曲线遵循


`JavaScript (ES5/6)` ===> `React` => `React Native` => ------|
         |            |       |                     |        |
        `FP`          |       ==> `Flux/Redux`  ==> |        |
                      |                                      |
                     ===> `Vue` => `Vuex` => ----------------|
                                                             |
                                                             |
`HTML` => `HTML5`   ===>     `Mental Model`  <===  ----------|
                     |           |
                     |           |
                     |        `Design` ===> `Art` ===> ...
                     |
`CSS` => `CSS3` => `LESS`

本文重在 “术”，追求的是广度，要想继续学习，在前端领域深入耕耘、探索，请参见以下内容：

  • “道” —— 有一些技术背后的原理阐述、架构思考、编程方法论等。
  • “法” —— 对前端细分领域的思考，注重深度，比如动画等。

另外，微信作为一个独立的开发体系，参见 Wechat

概览

How it feels to learn JavaScript in 2016

中文版 => 在 2016 年学 JavaScript 是一种什么样的体验？

Front-End Developer Handbook 2017

开发工具

  • WebStorm / VSCode / Sublime Text / Atom
  • Chrome

一些常用工具的使用方法可参考 toolkit

版本控制 Git

编码规范 JavaScript

调试工具

JavaScript

React - 官网

React Native - 官网

Application Architecture

Components 组件化开发思想

其他

Vue - 官网

Test 测试

Web

HTML

CSS

LESS

Color

移动端

移动端尺寸基础知识

移动端高清、多屏适配方案

使用Flexible实现手淘H5页面的终端适配

再聊移动端页面的适配

Data Visualization 数据可视化

数据可视化概览

Canvas vs SVG

WebGL 技术储备指南

ECharts

AntV

AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践

  • G2 可视化图形语法

    一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表

  • G6 关系数据可视化

    关系数据可视化引擎，开发者可以基于 G6 拓展出属于自己的图分析应用或者图编辑器应用

  • F2 移动端可视化解决方案

    专为移动端定制的一套开箱即用的可视化解决方案，具有精简、高性能、易扩展的特性。适用于对性能、大小、扩展性要求严苛的场景

D3

D3.js (Data-Driven Documents) 是基于数据操作文档的 JavaScript 库。D3 绑定数据到 DOM，根据数据操作文档，创建交互式的图表。需要注意的是，数据转换和绘制相互独立。

Design

设计体系方法论： atomic design，阐述了从抽象到具体的 5 个层次：

Atoms => Molecules => Organisms => Templates => Pages

Ant Design 一个服务于企业级产品的设计体系，基于『确定』和『自然』的设计价值观和模块化的解决方案，让设计者专注于更好的用户体验

Material Design A visual language that synthesizes the classic principles of good design with the innovation of technology and science

Components

Solutions

作为离用户最近的端，绕不开设计，会将搜集到的一些设计资源汇总在 Design 中。

References

Web 前端导航

前端资源库

Page speed optimization

浏览器兼容性 Can I Use

Create a minimal favicon

Electron - 官网

TypeScript - 官网

← Metadata

180
Stars
42
Forks
Watchers

Owner

verified publisher icon alcat2008

Metadata

前端学习指南

Back