20 KiB
前端性能优化
首先是推荐几本前端性能优化方面的图书。
接下来是一些最佳实践性的文档。
接下来,重点推荐一个性能优化的案例学习网站 WPO Stats 。WPO是Web Performance Optimization的缩写,这个网站上有很多很不错的性能优化的案例分享,一定可以帮助你很多。
然后是一些文章和案例。
接下来是一些性能工具。在线性能测试分析工具太多,这里只推荐比较权威的。
另外,中国的网络有各种问题(你懂的),所以,你不能使用Google共享的JavaScript链接来提速,你得用中国自己的。你可以到这里看看中国的共享库资源,Forget Google and Use These Hosted JavaScript Libraries in China 。
前端框架
接下来,要学习的是Web前端的几大框架。目前而言,前端社区有三大框架Angular.js、React.js和Vue.js。我认为,React和Vue更为强劲一些,所以,我这里只写和React和Vue相关的攻略。关于两者的比较,网上有好多文章。我这里推荐几篇我觉得还不错的,供你参考。
- Angular vs. React vs. Vue: A 2017 comparison
- React or Vue: Which JavaScript UI Library Should You Be Using?
- ReactJS vs Angular5 vs Vue.js - What to choose in 2018?
其实,比较这些框架的优缺点还有利弊并不是要比出个输赢,而是让你了解一下不同框架的优缺点。我觉得,这些框架都是可以学习的。而在我们生活工作中具体要用哪个框架,最好还是要有一些出发点,比如,你是为了找份好的工作,为了快速地搭一个网站,为了改造一个大规模的前端系统,还是纯粹地为了学习……
不同的目的会导致不同的决定。我并不希望上述的这些比较会让你进入“二选一”或是“三选一”的境地。我只是想通过这些文章让你知道这些框架的设计思路和实现原理,这些才是让你受益一辈子的事。
React.js框架
下面先来学习一下React.js框架。
入门
React学起来并不复杂,就看 React 官方教程 和其文档就好了( React 的中文教程 )。
然后,下面的文章会带你了解一下React.js的基本原理。
提高
学习一个技术最重要的是要学到其中的思想和方法。下面是一些我觉得学习React中最重要的东西。
- [Common React.js mistakes: Unneeded state](http://reactkungfu.com/2015/09/common-react-dot-js-mistakes-unneeded-state/) ,React.js编程的常见错误——不必要的状态。
- [State is an Anti-Pattern](https://www.reddit.com/r/reactjs/comments/3bjdoe/state_is_an_antipattern/) ,关于如何做一个不错的组件的思考,很有帮助。
- [Why Local Component State is a Trap](https://www.safaribooksonline.com/blog/2015/10/29/react-local-component-state/) ,一些关于 “Single state tree” 的想法。
- [Thinking Statefully](https://daveceddia.com/thinking-statefully/) ,几个很不错的例子让你对声明式有状态的技术有更好的理解。
- 传统上,解决React的状态问题一般用Redux。在这里推荐 [Tips to learn React + Redux in 2018](https://www.robinwieruch.de/tips-to-learn-react-redux/) 。Redux是一个状态粘合组件,一般来说,我们会用Redux来做一些数据状态和其上层Component上的同步。这篇教程很不错。
-
最后是 "State Architecture Patterns in React " 系列文章,非常值得一读。
-
- [Part 1: A Review](https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-a-review-df02c1e193c6)
- [Part 2: The Top-Heavy Architecture, Flux and Performance](https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-2-the-top-heavy-architecture-flux-and-performance-a388b928ce89)
- [Part 3: Articulation Points, zine and An Overall Strategy](https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-3-articulation-points-zine-and-an-overall-strategy-cf076f906391)
- [Part 4: Purity, Flux-duality and Dataflow](https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-4-purity-flux-duality-and-dataflow-d06016b3379a)
- Master the JavaScript Interview: What is Functional Programming?
- The Rise and Fall and Rise of Functional Programming (Composing Software)
- Functional UI and Components as Higher Order Functions
- Functional JavaScript: Reverse-Engineering the Hype
- Some Thoughts on Function Components in React
- React Higher Order Components in depth
- Presentational and Container Components
- Controlled and uncontrolled form inputs in React don’t have to be complicated
- Function as Child Components
- Writing Scalable React Apps with the Component Folder Pattern
- Reusable Web Application Strategies
- Characteristics of an Ideal React Architecture
- 9 things every React.js beginner should know
- Best practices for building large React applications
- Clean Code vs. Dirty Code: React Best Practices
- How to become a more productive React Developer
- 8 Key React Component Decisions
- [Awesome React](https://github.com/enaqx/awesome-react) ,这是一些React相关资源的列表,很大很全。
- [React/Redux Links](https://github.com/markerikson/react-redux-links) ,这也是React相关的资源列表,与上面不一样的是,这个列表主要收集了大量的文章,其中讲述了很多React知识和技术,比上面的列表好很多。
- [React Rocks](https://react.rocks/) ,这个网站主要收集各种React的组件示例,可以让你大开眼界。
- 通过文章 “[Why 43% of Front-End Developers want to learn Vue.js](https://medium.com/vue-mastery/why-43-of-front-end-developers-want-to-learn-vue-js-7f23348bc5be)” ,你可以看出其编程方式和React是大相径庭的,符合传统的前端开发的思维方式。
- 通过文章 [Replacing jQuery With Vue.js: No Build Step Necessary](https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/) ,我们可以看到,从jQuery是可以平滑过渡到Vue的。
- 另外,我们可以通过 “[10 things I love about Vue](https://medium.com/@dalaidunc/10-things-i-love-about-vue-505886ddaff2)” ,了解Vue的一些比较优秀的特性。
- [How not to Vue](https://itnext.io/how-not-to-vue-18f16fe620b5) ,任何技术都有坑,了解Vue的短板,你就能扬长避短,就能用得更好。
- [Vue.js Component Communication Patterns](https://alligator.io/vuejs/component-communication/)
- [4 AJAX Patterns For Vue.js Apps](https://medium.com/js-dojo/4-ajax-patterns-for-vue-js-apps-add915fc9168)
- [How To (Safely) Use A jQuery Plugin With Vue.js](https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/)
- [7 Ways To Define A Component Template in Vue.js](https://vuejsdevelopers.com/2017/03/24/vue-js-component-templates/)
- [Use Any Javascript Library With Vue.js](https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/)
- [Dynamic and async components made easy with Vue.js](https://lobotuerto.com/blog/dynamic-and-async-components-made-easy-with-vuejs/)
- 入门篇
函数式编程。从jQuery过来的同学一定非常不习惯React,而从Java等后端过来的程序员就会很习惯了。所以,我觉得React就是后端人员开发的,或者说是做函数式编程的人开发的。对此,你需要学习一下JavaScript函数式编程的东西。
这里推荐一本免费的电子书 《Professor Frisby’s Mostly Adequate Guide to Functional Programming》,其中译版为《JS函数式编程指南中文版》。
下面有几篇文章非常不错。前两篇和函数式编程有关的文章非常值得一读。后三篇是一些比较实用的函数式编程和React结合的文章。
设计相关。接下来是学习一些React的设计模式。React Pattern 是一个不错的学习React模式的地方。除此之外,还有如下的一些不错的文章也会对你很有帮助的。
实践和经验
还有一些不错的实践和经验。
资源列表
最后就是React的资源列表。
Vue.js框架
Vue可能是一个更符合前端工程师习惯的框架。不像React.js那样使用函数式编程方式,是后端程序员的思路。
最令人高兴的是,Vue的作者是我的好朋友尤雨溪(Evan You),最近一次对他的采访 “Vue on 2018 - Interview with Evan You” 当中有很多故事以及对Vue的展望。(注意:Vue是完全由其支持者和用户资助的,这意味着它更接近社区而不受大公司的控制。)
要学习Vue并不难,我认为上官网看文档( Vue 官方文档(中文版)),照着搞一搞就可以很快上手了。Vue.js screencasts 是一个很不错的英文视频教程。
另外,推荐 新手向:Vue 2.0的建议学习顺序 ,这是Vue作者写的,所以有特殊意义。
Vue的确比较简单,有Web开发经验的人上手也比较快,所以这里也不会像React那样给出很多的资料。下面是一些我觉得还不错的内容,推荐给你。
当然,最后一定还有 Awesome Vue ,Vue.js里最为巨大最为优秀的资源列表。
小结
总结一下今天的内容。我先介绍的是前端性能优化方面的内容,推荐了图书、最佳实践性的文档、案例,以及一些在线性能测试分析工具。随后重点讲述了React和Vue两大前端框架,给出了大量的文章、教程和相关资源列表。我认为,React.js使用函数式编程方式,更加符合后端程序员的思路,而Vue是更符合前端工程师习惯的框架。因此,两者比较起来,Vue会更容易上手一些。
下篇文章,我们将讲述前端工程师的一个基本功——UI/UX设计。敬请期待。
下面是《程序员练级攻略》系列文章的目录。