zoukankan      html  css  js  c++  java
  • Techparty-广州Javascript技术专场(学习分享)

    上周末(2016/07/31)去了一个技术沙龙学习前端相关的东西,下面是各个主题我印象比较深的。

    React + Redux 最佳实践

    主题:本次分享,主要从React/Redux相关概念及其工具链,Webpack构建流程,如何Mock数据,如何测试以及一些开发小经验等方面,分享介绍如何使用React/Redux开发一个前后端分离的企业级应用系统。

    有意思地方:

    1. 规范化

    通过开发工具进行代码校验,统一编码风格。

    统一的ES6写法(这个见仁见智)。

    2. JavaScript测试

    进行JavaScript,介绍了测试工具。

    • jsdom(构建符合W3标准的DOM)

    • mocha(JS测试框架)

    • chai(Node BDD/TDD 断言库)

    • enzyme(airbnb出的React测试工具)

    • isparta(ES6代码测试覆盖率工具)

    • nock(HTTP 模拟库)

    • redux-mock-store(用于测试异步请求或中间件时,模拟store)

    • sion(用于JavaScript的测试监视(spy)、桩(stub)和仿制(mock)功能)

    JavaScript to Native

    主题:分享目前 JavaScript 编写 Native App 的现状,围绕 React Native 和 Weex 展示 JavaScript 编写原生应用的开发和调试,并讲解其中的一些原理。

    有意思地方:

    1. 将页面转成原生界面

    这个还在理论实践的阶段,原理是页面DOM转成Virtual DOM(虚拟DOM)再而转成原生组件。

    PS:有趣是有趣,但未有实践产物,难想象实践效果。(个人觉得东西没做出来就急于分享着实不好)

    零配置前端开发流程

    主题:Web 技术没有独裁者控制,野蛮发展导致开发环境特别混乱。不同的工具由不同的群体维护,各玩各的,常会有兼容性的问题。一个 “现代化” 的前端项目前后可能需要花费 10%~15% 的精力维护项目构建的配置,非常浪费时间。在这个分享主题我会示范一个的前端开发流程,把花在配置的时间趋于 0。

    有意思地方:

    1. 使用的前端框架或工具

    浏览器,移动端,后台NodeJS,同构

    npm vs bower vs systemjs vs duo

    grunt vs gulp vs browserify vs webpack vs rollup

    less,sass,postcss,css-module

    ES3,ES5,ES6,ES2016

    TypeScript,FlowType

    React,Angular,VueJS

    PS:用的都是有逼格、新的东西。

    使用 Meteor + React 进行快速的原型开发

    主题:主要介绍 Meteor 框架的特点,如何使用 Meteor 为 React 提供类似 Redux 的前后端数据流控制,什么是 Reactive Programming,如何实现 Optimistic UI,还有基于 websocket 编程,以及 Meteor 的现状和未来。

    有意思地方:

    1.  Reactive Programming

    Reactive响应式(反应式)编程 是一种新的编程风格,其特点是异步或并发、事件驱动、推送PUSH机制以及观察者模式的衍生。reactive应用(响应式应用)允许开发人员构建事件驱动(event-driven),可扩展性,弹性的反应系统:提供高度敏感的实时的用户体验感觉,可伸缩性和弹性的应用程序栈的支持,随时可以部署在多核和云计算架构。

    PS:简单说就是数据的交互是通过websocket进行实时交互。

    概念可参考:http://www.jdon.com/idea/js/rxjs.html

    React前后端同构实践

    主题:本次分享我们在使用react+redux过程中遇到的一些性能瓶颈,我们在解决前后端代码/API复用、提升工作效率和前后台架构调整中所做的一些尝试及成果。

    有意思地方:

    1. 同构的思想

    同构 JavaScript 应用基于 JavaScript 编写,可以在客户端和服务端运行。正因为此,你只需要写一次代码,就可以在服务端渲染静态页面,还可以在客户端完成复杂的交互。

    服务端渲染的页面可以很好解决两个问题:

    (1). 性能

    因为相对于静态页面,SPA 需要更多的客户端代码,需要下载数据的体积也更大。这使得手机加载速度很慢,可能会导致一些极端的状况 —— 比如糟糕的用户体验以及收入上的损失等。依据 Microsoft 的一篇文章 ——

    PS:Bing 的一项研究表明:页面的加载时间每增加 10ms,站点年度总收入就会减少 $250K。

    (2). SEO

    因为单页面应用依赖于 JavaScript 的执行,服务器不会提供它们可能用到的任何 HTML 内容。因此,web 爬虫很难去索引到这些页面。爬虫就是可以像 web 服务器发送请求,并且将结果分析成原始文本的程序,而不需要像一个浏览器运行 JavaScript 那样解释和执行客户端的内容。不久前,Google 优化了搜索引擎的 web 爬虫,现在它也可以抓取基于客户端 JavaScript 所构建的页面了。但是 Bing、Yahoo 以及其他搜索引擎怎么办?一个好的索引对任何公司来说都至关重要,它通常会带来更多的流量以及更高的回报。

    2. 首屏加载速度方式

    检测首屏加载速度,分加载模块进行优化,提高首屏加载速度,减少用户等待时间。

    总结

    讲的绝大多数跟React相关,看来他们是非常推崇这个框架,非常提倡组件化的开发思路。除去React的不说,我觉得比较重要的是JS测试方面,这方面我们有待加强。代码规范和工具使用都是老生常谈的,这点不用多讲。最后有一点也必须特别注意是,前端在不断发展,新的好的框架或JS版本,可以考虑使用,让代码写得更优雅。

  • 相关阅读:
    iscroll.js
    HTML 第九章总结
    HTML第八章总结
    HTML第七章总结
    HTML第六章总结
    HTML第五章总结
    HTML第四章总结
    HTML第三章总结
    HTML第二章总结
    HTML第一章总结
  • 原文地址:https://www.cnblogs.com/lovesong/p/5730820.html
Copyright © 2011-2022 走看看