翡翠熊猫 發表於 2019-6-12 11:51:00

前端开发，最新技术栈总结

<div id="cnblogs_post_body" class="blogpost-body">
<p><img class="confluence-embedded-image confluence-external-resource" src="http://p1.pstatp.com/large/pgc-image/5ea34b2cf22f48c886a5c89c9b475c1a" alt="" data-image-src="http://p1.pstatp.com/large/pgc-image/5ea34b2cf22f48c886a5c89c9b475c1a"></p>
<div class="pgc-img"><img class="editor-inline-macro" src="https://wiki.kaiyuan.net/plugins/servlet/confluence/placeholder/macro?definition=e3RvY30&amp;locale=zh_CN&amp;version=2" alt="" data-macro-name="toc" data-macro-id="ea575ee6-ed6e-43f5-9afd-00339db931a3" data-macro-schema-version="1"></div>
<h1>1. 基础前端开发者</h1>
<h2>1.1 HTML &amp; CSS</h2>
<p>最基础的知识:</p>
<p>语义化的HTML元素</p>
<p>基础的CSS语法</p>
<p>Flexbox &amp; Grid</p>
<p>CSS变量</p>
<p>浏览器开发者工具</p>
<h2>1.2 响应式布局</h2>
<p>响应式设计将不再是网页的加分项, 而是必须的</p>
<p>设置viewport</p>
<p>非固定宽度</p>
<p>媒体查询</p>
<p>使用 rem 替代 px</p>
<p>移动优先,柱状显示</p>
<h2>1.3 基础的部署工作</h2>
<p>学会如何部署一个静态网站到服务器</p>
<p>注册一个域名(NameCheap, Google Domains)</p>
<p>管理共享主机或虚拟机(Inmotion, Hostgator, Bluehost)</p>
<p>FTP, SFTP 文件上传(Filezilla, Cyberduck)</p>
<p>静态页面托管(Netlify, Github Pages)</p>
<h2>1.4 SASS预处理器</h2>
<p>虽然不是必须的, 但是推荐去学, 基础知识的掌握很简单</p>
<p>结构化CSS</p>
<p>变量</p>
<p>嵌套样式表</p>
<p>Minxins &amp; 函数</p>
<p>继承</p>
<h2>1.5 原生JavaScript语法</h2>
<p>不使用任何框架和库区学习原生的JS语法</p>
<p>数据类型, 函数, 条件判断, 循环, 凑总府</p>
<p>DOM操作和事件</p>
<p>JSON</p>
<p>Fetch</p>
<p>ES6+(箭头函数, Promise, async/await, 解构)</p>
<h2>1.6 满足了基本的前端开发者的条件</h2>
<p>构建静态站点</p>
<p>构建UI布局(拿到设计图能够使用HTML/CSS还原)</p>
<p>添加一些交互功能</p>
<p>部署和维护网站</p>
<p>现在能找到最低水平的Web开发工作, 但是这是远远不够的....</p>
<div class="pgc-img"><img class="confluence-embedded-image confluence-external-resource" src="http://p99.pstatp.com/large/pgc-image/14a6efa845e347f78fbba3525ddfd281" alt="" data-image-src="http://p99.pstatp.com/large/pgc-image/14a6efa845e347f78fbba3525ddfd281">
<p class="pgc-img-caption">&nbsp;</p>
</div>
<h1>2. 一个成熟的前端开发者</h1>
<h2>2.1 HTML &amp; CSS框架</h2>
<p>HTML/CSS框架目前没有以前那么有意义, 但是我还是介意你选择一个学习(这里作者想隐射的应该是, 在jquery时代, HTML/CSS框架的学习是必须的).</p>
<p>BootStrap</p>
<p>Materialize</p>
<p>Bulma</p>
<h2>2.2 Git和其他工作流工具</h2>
<p>Git绝对是每一个Web开发者必须掌握的工具, 这里也有一些其他的工作流工具的建议.,</p>
<p>基础的命令行(touch, cd, mkdir什么的总得会, 命令行在下面的工具中都会用到)</p>
<p>Git(版本控制)</p>
<p>NPM 或 Yarn(包管理)</p>
<p>Webpack 或者 Parcel(打包工具)</p>
<p>Gulp 或者 Grunt(任务管理和构建工具)</p>
<p>编辑器插件(ESLint, Prettier, Live Server等)</p>
<h2>2.3 前端框架</h2>
<p>学习一个前端框架在目前前端开发中是必须的.</p>
<p>在大公司开发中非常流行</p>
<p>更多的交互 &amp; 有趣的UI组件</p>
<p>组件化 &amp; 模块化前端代码</p>
<p>对团队有利</p>
<h2>2.4 状态管理</h2>
<p>对于使用框架的大型前端项目, 你也许需要使用状态管理工具去管理你的应用级的状态</p>
<p>Redux(Context API)</p>
<p>Apollo(GraphQL Client)</p>
<p>Vuex</p>
<p>NgRx</p>
<h2>2.5 满足一个成熟的前端开发者条件</h2>
<p>构建一个优秀的前端应用</p>
<p>流畅和稳定的前端工作流</p>
<p>多人开发 &amp; 熟练使用Git</p>
<p>请求后端API &amp; 前端数据响应</p>
<p>满足以上条件, 你能够顺利的找到一个前端的工作并干得很出色~</p>
<div class="pgc-img"><img class="confluence-embedded-image confluence-external-resource" src="http://p1.pstatp.com/large/pgc-image/7b0b67e48e7644ae8e5894cbdee01ef5" alt="" data-image-src="http://p1.pstatp.com/large/pgc-image/7b0b67e48e7644ae8e5894cbdee01ef5">
<p class="pgc-img-caption">&nbsp;</p>
</div>
<h1>3 全栈开发工程师</h1>
<h2>3.1 学习一门后端语言</h2>
<p>成为一个全栈工程师或软件工程师, 你将需要学习一个服务端语言和相关技术</p>
<p>Node.js</p>
<p>Python</p>
<p>PHP</p>
<p>C#</p>
<p>Go</p>
<p>学习的顺序:</p>
<p>基础的后端语言语法</p>
<p>数据结构和工作流</p>
<p>包管理</p>
<p>HTTP/路由</p>
<h2>3.2 服务端框架</h2>
<p>不要重复造轮子, 学习一门框架去构建更好和更快的应用</p>
<p>Node.js(Express, Koa, Adonis)</p>
<p>Python(Django, Flask)</p>
<p>PHP(Laravel, Symfony)</p>
<p>C# (ASP.NET)</p>
<h2>3.3 数据库</h2>
<p>绝大多数觉得应用都会使用到数据库, 这里有一些选择:</p>
<p>关系型数据库(MySQL, PostgreSQL, MS SQL)</p>
<p>非关系型数据库 (MongoDB, Counchbase)</p>
<p>云服务 (Firebase, AWS, Azure, DocumentDB)</p>
<p>轻量级(SQLite, NeDB, Redis)</p>
<h2>3.4 服务端渲染</h2>
<p>像React, Vue 和 Angular等端架都可以进行服务端渲染</p>
<p>Next.js(React)</p>
<p>Nuxt(Vue)</p>
<p>Angular Universal(Angular)</p>
<h2>3.5 内容管理系统</h2>
<p>内容管理系统允许快速开发并为您的客户提供更新内容的能力. 在你需要快速开发网站的时候, 它们是很适合的. 特别是对于自由开发者.</p>
<p>基于PHP的 (Wordpress, Drupal)</p>
<p>基于JS的 (Ghost, Keystone)</p>
<p>基于Python的 (Mezzazine)</p>
<p>基于.Net的 (Piranha, Orchard CMS)</p>
<h2>3.6 DevOps 和部署</h2>
<p>学习语言和框架是一回事, 但是安装环境, 测试和部署有事另外一回事</p>
<p>部署 (Linux, SSH, Git, Nginx, Apache)</p>
<p>平台 (Digital Ocean, AWS, Heroku, Azure)</p>
<p>可视化(Docker, Vagrant)</p>
<p>测试 (单元测试, 集成测试, 函数式测试, 系统测试)</p>
<h2>3.7 满足全栈工程师的条件</h2>
<p>设置全栈的开发环境和工作流</p>
<p>构建后端服务API和微服务</p>
<p>数据库操作</p>
<p>能够独立开发应用(前端和服务端)</p>
<p>部署到云端(SSH, Git, Servers等等)</p>
<div class="pgc-img"><img class="confluence-embedded-image confluence-external-resource" src="http://p99.pstatp.com/large/pgc-image/3f1c85a0fff447a7b0bf6471dcaf0708" alt="" data-image-src="http://p99.pstatp.com/large/pgc-image/3f1c85a0fff447a7b0bf6471dcaf0708">
<p class="pgc-img-caption">&nbsp;</p>
</div>
<h1>4. 2019技术趋势和其他</h1>
<h2>4.1原生应用开发</h2>
<p>React Native(使用React构建原生应用)</p>
<p>NativeScirpt(Angular, Typescript, JavaScript)</p>
<p>Ionic (HTML/CSS/JS 实现混合应用)</p>
<p>Flutter (使用Dart语言开发原生应用的移动端SDK)</p>
<p>Xamarin (使用C#开发的移动端应用)</p>
<h2>4.2 使用Electron开发桌面应用</h2>
<p>Electron是一个使用JavaScript构建跨平台的桌面应用工具.</p>
<p>使用到了 Chromium内核和Node.js</p>
<p>兼容Windows, Mac &amp; Linux</p>
<p>崩溃报告, 调试和性能分析</p>
<h2>4.3 GraphQL &amp; Apollo</h2>
<p>GraphQl是对于API的一种革命性新方法，查询语言比标准RESET严格得多</p>
<p>只查询你想要的东西</p>
<p>前端和后端可以合作得更为顺利</p>
<p>查询语句非常简单且很像JSON语句</p>
<p>Apollo是一个发送请求到GraphQL的客户端</p>
<p>使用的是Gatsby静态站点生成器</p>
<h2>4.4 TypeScript</h2>
<p>TypeScript是一个JavaScript的超集, 它添加了静态类型等很多特性.</p>
<p>变量, 函数等类型</p>
<p>类</p>
<p>其他ES6的特性</p>
<p>在Angular中被使用到, 同时也可以在React和Vue中被使用</p>
<h2>4.5 无服务架构</h2>
<p>无需创建和管理自己的服务器</p>
<p>使用第三服务执行“无服务器功能”</p>
<p>例如 AWS, Netify &amp; Firebase</p>
<p>在Gatsby静态站点生成器很流行</p>
<p>无服务框架</p>
<h2>4.6 AI和机器学习</h2>
<p>AI和机器学习已经被广泛应用在所有的程序和技术中, 甚至包括web开发中.</p>
<p>机器学习可以允许Web应用程序随时间进行调整</p>
<p>虽然AI还有很长的路要走, 但是我们会看到它会更多的用在web中</p>
<p>虽然目前绝大多数都是Python写的, 但也有Tensorflow.js和Brain.js这些JS的库</p>
<h2>4.7 区块链技术</h2>
<p>现在许多公司使用区块链技术进行数字交易, 因为它们更安全和有效率.</p>
<p>Solidity(一门智能合约的编程语言)</p>
<p>Mist(以太坊开发的浏览器, 用于发送交易和合约)</p>
<p>比特币API(可以构建app和整和比特币的区块链开发)</p>
<h2>4.8 PWA</h2>
<p>Progressive Web Apps是一个web app但是在功能和样式上给用户带来原生应用使用体验的一项技术.</p>
<p>响应式</p>
<p>在离线环境下也能够提供服务</p>
<p>类似App的交互</p>
<p>HTTPS</p>
<p>可靠, 迅速, 更好</p>
<h2>4.9 Web Assembly</h2>
<p>类似汇编的二进制格式的代码可以被浏览器执行. 可以使用类似C/c++和Rust等高级语言进行编写.</p>
<p>比JavaScript执行效率快</p>
<p>更安全 - 强制的浏览器同源和安全协议</p>
<p>开放 &amp; 可调试</p>
<div class="pgc-img">&nbsp;</div>
<p>&nbsp;https://www.cnblogs.com/chang229/p/8473660.html</p>
</div><br><br>
来源：https://www.cnblogs.com/hellman/p/11008735.html
頁: [1]
查看完整版本: 前端开发，最新技术栈总结