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版本,可以考虑使用,让代码写得更优雅。
Techparty-广州Javascript技术专场(学习分享)的更多相关文章
- 【重磅资料】ArchSummit全球架构师峰会·2019华为云技术专场资料下载
ArchSummit全球架构师峰会是InfoQ中国团队推出的重点面向高端技术管理者.架构师的技术会议,54%参会者拥有8年以上工作经验.ArchSummit聚焦业界强大的技术成果,秉承"实践 ...
- JavaScript Shell学习分享
目录 JavaScript Shell学习分享 简介 安装 使用原因 小结 JavaScript Shell学习分享 简介 JavaScript Shell是由Mozilla提供的综合JavaScri ...
- 细数Javascript技术栈中的四种依赖注入
作为面向对象编程中实现控制反转(Inversion of Control,下文称IoC)最常见的技术手段之一,依赖注入(Dependency Injection,下文称DI)可谓在OOP编程中大行其道 ...
- 开源大数据技术专场(上午):Spark、HBase、JStorm应用与实践
16日上午9点,2016云栖大会“开源大数据技术专场” (全天)在阿里云技术专家封神的主持下开启.通过封神了解到,在上午的专场中,阿里云高级技术专家无谓.阿里云技术专家封神.阿里巴巴中间件技术部高级技 ...
- GMTC2019会后:做一场冷门的技术专场是什么体验
上周四(6.20)GMTC2019大会的第一天,很荣幸作为「UI与图形渲染」专场出品人获得了与图形领域几位技术专家同场交流的机会. 图形技术在前端范畴内是一个相对小众的话题,虽然前端工程师几乎每天都在 ...
- django之JavaScript的简单学习2
前言:ajax预备知识:json进阶 1.JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON是用字符串来表示Javascript对象: 请大家记住一 ...
- (转)探讨:ASP.NET技术的学习顺序问题
探讨:ASP.NET技术的学习顺序问题 摘要:很多人对于ASP.NET的入门和学习顺序比较迷茫,今天让我们一起来跟随作者的思路学习探讨ASP.NET的学习顺序问题,希望有所帮助. 如果你已经有较多的面 ...
- 【转】手把手教你读取Android版微信和手Q的聊天记录(仅作技术研究学习)
1.引言 特别说明:本文内容仅用于即时通讯技术研究和学习之用,请勿用于非法用途.如本文内容有不妥之处,请联系JackJiang进行处理! 我司有关部门为了获取黑产群的动态,有同事潜伏在大量的黑产群 ...
- Excel阅读模式/单元格行列指示/聚光灯开发 技术要点再分享
1. 引言 文题中所谓技术要点再分享,本意是想在大神Charltsing Liu的博文“简单介绍Excel单元格行列指示的实现原理(俗称聚光灯功能)”的基础上写一点个人开发体会.写本文的初衷有三点,一 ...
随机推荐
- Css概要与选择器,刻度单位
目录 一.CSS3概要 1.1.特点 1.2.效果演示 1.3.帮助文档与学习 二.选择器 1.1.基础的选择器 1.2.组合选择器 1.3.属性选择器 1.4.伪类 1.5.伪元素 三.特殊性(优先 ...
- Utility1:Overview
Utility 是利用,使用的意思,utilization是指使用效率,利用率的意思. SQL Sever 内置 Utility Feature,便于集中监控Server关键资源(CPU和Disk)的 ...
- SEO的Content里面的内容被转义的解决方法
看图,不说话 转义的根源 收工 可能不全面,不过确实解决了这个问题,有更好的方法可以提一下,逆天感激不尽
- LINQ系列:Linq to Object元素操作符
元素操作符从一个序列返回单个指定的元素. 1. DefaultIfEmpty DefaultIfEmpty操作符将一个空集合替换为包含默认的单个值的集合.在返回序列为空且又需要返回一些对象时,可以通过 ...
- Android中Path类的lineTo方法和quadTo方法画线的区别
转载:http://blog.csdn.net/stevenhu_223/article/details/9229337 当我们需要在屏幕上形成画线时,Path类的应用是必不可少的,而Path类的li ...
- Razor Engine,实现代码生成器的又一件利器
Razor Engine,之前仅仅是ASP.NET MVC的一种View引擎,目前已经完全成为一种可以独立使用的模版引擎,并且已经成为了CodePlex上一个开源的项目(http://razoreng ...
- Lua 学习笔记(十一)元表与元方法
在Lua中的每个值都有一套预定义的操作集合.例如可以将数字相加,可以连接字符串,还可以在table中插入一对key-value等.但是我们无法将两个table相加,无法对函数作比较,也无法调用一个字符 ...
- js ES6 对字符的操作注意事项
1.codePointAt方法是测试一个字符由两个字节还是由四个字节组成的最简单方法. function is32Bit(c) { return c.codePointAt(0) > 0xFFF ...
- java多线程--几个多线程面试题小结
自学了一段时间的多线程知识,尝试了做了几个编程题,发现想象中很简单的功能,自己真写起来要花费远超自己想象的功夫,知识点易学,不易用啊. 面试题1:编写程序实现,子线程循环10次,接着主线程循环20次, ...
- spring笔记--事务管理之声明式事务
事务简介: 事务管理是企业级应用开发中必不可少的技术,主要用来确保数据的完整性和一致性, 事务:就是一系列动作,它们被当作一个独立的工作单元,这些动作要么全部完成,要么全部不起作用. Spring中使 ...