今年是我第二次参加亚洲 JS 研讨会， (http://jsconf.asia ) 去年十一月我在 JSCamp.Asia ，第一次参与国际研讨会， 去年的纪录写在这 http://blog.javascript.tw/2012/12/201212.html 参与国际研讨会能跟那些许多着名的 framework 作者或很厉害的传教士同堂， 技能上跟文化上都学不少事情。 去年想写完整的纪录一路难产到现在，有监於此 既然一时写不出完整的纪录，那今年就先来写点简单纪录好了。 我照议程顺序列 11/28 ＠ 开场 非常炫的海底开场，充分的表达研讨会的活力跟开发者的幽默。 XD We are creative , we are powerful. 不必要是死气沉沉的，我们是一群享受在各种有趣乐趣的工程师。 ------------------------------------------------------------- ＠ Making the mobile web site faster 这一个问题主要在探讨如何让手机在网路流量有限的状况下， 尽可能变快，提到了非常多实用的技巧。 诸如快慢的感受问题，为什麽需要处理速度。 * 减低载入速度的实际手段： 图片大小整理（同一张图片有再缩小可能）、 用 inline image 降低连线数， 多档打包降低连线数。 侦测并移除没用到的 CSS * 避免使用一些会增加浏览时间的手段： redirect page ，避免不必要的 redirect 。 （会增加 hand-shake 时间，另外也相依於伺服器处理能力。） 通常这类浪费时间的跳页会用在底下这三种情境： 1.切换语系 2.侦测到手机版时跳到手机版 3.用来追踪（像是fb 上的 link 会先连到 fb 再跳到其他网站） * 预先存取 dns 避免 dns lookup 时间 <link rel="dns-prefech" href="<dns>" /> * 在 head 读取最必要的 css 就好，其他一些不重要的 css 可以之後再读。 * 不要在 body 里面混杂 html 跟 script tag ，导致 rendering 中断。 * 使用工具 page insight 来观测网页情况 * 使用伺服器模组来帮忙你调整 mod_pagespeed ngx_pagespeed 现场随手速记 https://www.facebook.com/groups/javascript.tw/permalink/424236361011041/ 投影片 http://goo.gl/ySHjDW ＠ The rise of things * 有些崛起的事情 * 这一个 talk 主要在讨论现在有许多硬体正在兴起，事实上透过软体控制 硬体是非常有可能在未来发生的，像是 raspberry pi * 以前我们的电脑运算非常缓慢，但现在的电脑非常快，可处理非常多问题， 在可见的未来，可能每件事情都会有电脑的进驻。 讲者认为未来可以用 js 来控制所有硬体。 目前也还有许多麻烦的问题正在等着解决，像是识别装置、授权、登入， 装置控制跟一些通讯协定之类的，还有要处理断线的时候该怎麽运作等。 * 作者举出他用来控制相机模组，自动定期拍下每天的夕阳， 并传送给系统的一个例子，来说明这一块还有许多的可能性。 现场随手速记 https://www.facebook.com/groups/javascript.tw/permalink/424244024343608/ 投影片 http://www.slideshare.net/TimPark4/the-rise-of-things ------------------------------- ＠ Css in the 4th Dimension : Not your Daddy's css animation 这一个 talk 我个人强烈建议，所有有志於前端的人都应该好好看看。 * 讲者强调其实虽然过去我们已经非常习惯用 jQuery 做到许多效果， 但在这个时代我们其实应该更习惯使用 css 去解决该让 css 解决的问题。 现代 css 很多状况下表现的其实已经比 JS 强悍很多， 更简单，更单纯，更快。 * 讲者不断 demo transition,animation,transform 如何做出各种效果，能应用到现代的情境跟可能性 * 讲者提到这类 css 设定中的一些无法支援的极端情况跟对应处理方针 * 讲者也提到浏览器的支援现况与向下相容的问题。 * btw 讲者会後被称为 css god ，代表大家对她的崇敬啊。 lol 本次大会议程品质如果要我排名的话，这个议程应该会进前三， 非常令人印象深刻的一个，再说一次，个人非常强烈建议看投影片。XD 现场随手速记 https://www.facebook.com/groups/javascript.tw/permalink/424255551009122/ 投影片 http://goo.gl/opFlN3 http://lea.verou.me/more-css-secrets/ ＠ A JavaScript Web app Deconstructed 这一场的主轴是透过解构 http://monocle.io/ 这个网站的结构， 来带大家认识 JavaScript 网站的结构。 但具体结构其实跟 rails 还有他自己用的一些模组绑的很死， 所以不是那麽容易看出个所以然来，讲者介绍的也偏表层。 我觉得对我整体参考价值算低，特别是我现在不是个 rails developer， 因此里面一堆 rails only solution 根本都不关我的事情。XD 现场随手速记 https://www.facebook.com/groups/javascript.tw/permalink/424262054341805/ 投影片 http://goo.gl/bSLreA ＠ Server-side NodeJS programming with ... Photoshop ? 其实这次 JSConf.Asia 有不少跨业结合， 也就是不只是 server side ，也不只是 client side。 更整合其他不同平台的应用，像是前面 Tim Park 提到的整合相机。 这场是用来用 nodejs 操作应用软体 photoshop 的功能， 像是透过 nodejs 加上声控模组来设定指令控制 photoshop 。XD （声控模组 julius http://julius.sourceforge.jp/en_index.php ） 还有就是透过 NodeJS 来接 photoshop 的事件，做一些 PS 的辅助应用。 然後讨论一些跨系统整合的困难点跟解决方案，也是非常活泼的应用。 现场随手速记 https://www.facebook.com/groups/javascript.tw/permalink/424275524340458/ 投影片 http://goo.gl/F8xuSn ＠ Ops for Everyone 让每个人使用的 NPC (?) 这一个讲题主要讲的是 deploy 环境建制跟团队基础建设的问题， 应该有许多团队都经历过，开发环境只有少数人知道， 而且每次开发都要经过重重手续跟人工，会造成许多潜在的问题。 像是某一条 script 忘了跑之类的，而且一个人做事， 其实其他人不会知道他做了什麽，其他人根本不知道该怎麽 deploy 。 万一这个人离职，啊，某个神秘的设定档在哪之类的事情， 某个指令要跑在某个指令之前之类的神秘规矩，这一切都没人记得了。XDDD 这里介绍 github 自己使用并提供的开源工具 boxen 跟 hubot。 boxen 主要用来建立环境、处理 compile & deploy 细节， 确保每一台机器都能透过 boxen 在同样的环境、同样的设定底下， 让机器设定不再是黑暗的角落。 而 hubot 则提供你一个方法，让每个行为都能定义成一个指令， 然後在 hubot 上执行的指令会被纪录、会被记得，会被其他人看见。 你甚至可以为此产生图表，以了解 hubox 跟你的伺服器上发生的每件事。 现场随手速记 https://www.facebook.com/groups/javascript.tw/permalink/424282441006433/ 投影片 https://speakerdeck.com/johndbritton/ops-for-everyone ＠ automated css testing 自动化 css 测试，其实他主要是要谈为什麽要做 css 自动化测试， 目前能采取的方案有哪些，有哪些现成的工具。 为什麽我们需要对 css 做自动化设计， 跟就算是 css 设计，也应该要遵循 TDD 原则。 他提到的四个测试方案，在 ZK 时几乎都有实作。 我个人非常相信这一段我可以说出比他更多执行上的细节跟障碍。XD 会後我有稍微跟讲者聊一下， 他个人说我是他碰过第一个可以跟他聊这个议题跟知道细节的人。（笑） 现场随手速记 https://www.facebook.com/groups/javascript.tw/permalink/424286021006075/ 投影片 http://2013.jsconf.asia/blog/2013/10/20/jsconfasia-2013- ------------------ ＠ Bridging the gap between mobile platforms 探讨手机 app 的问题，并提出解决方案的一个 solution。 这个 solution 的答案是 hybird app . 前面开宗名义的讨论 native app 的问题，mobile web app 的问题， 然後最後提出解法：核心逻辑用 JS 写同一份，UI 各自刻或选用 mobile web。 http://calatrava.github.io 跟 phonegap/titanium 的差别，这两者都要求 based 在他们的 SDK ， 但 calatrava 则是 base 在原生平台，只在需要的部份选用 js 来共用逻辑， 或只在需要的部份选用 mobile web 来刻画面。 优势: 开发者观点 * 容易建置的结构，可以测试，需要熟 js 而不是 android ,ios. 企业观点 * 可以挂进已经存在的 app * 让 mobile web project 还是能有更多运用原生度可能。 * 更容易增加新功能(from html5) 其他 hybird 的选项 * kirinjs * Cordova 现场随手速记 https://www.facebook.com/groups/javascript.tw/permalink/424304861004191/ 投影片 http://goo.gl/1MiAk7 ＠ Straw - Dataflow processing for NodeJS 介绍 Straw 这专案 https://github.com/simonswain/straw 基本上就是讲 data flow processing 在 JS 上的实现， 所谓 data flow processing 其实就是把工作的 input/output 定义清楚， 然後让不同工作之间可以 pipe 且各自独立。 这样如果要改变工作的结果，只要改变中间工作的 flow 就能达成。 （大概就像是 linux 的指令 pipe 那种感觉， 你可以 cat file | grep matched | echo .... etc ) 现场随手速记 https://www.facebook.com/groups/javascript.tw/permalink/424309631003714/ ＠ ReactJS - Rethinking Best Practice 这一个讨论火药味蛮重的，在讨论现行的以 template 为基础的 MVC 结构， 到底是解决问题还是制造新的问题跟说明 React 的核心精神。 React 基本上意味着画面由许多状态构成， 并由状态绘制画面，他有几个很重要的特徵： * 不管画面长怎样，只要状态一样，他就应该能重演那个画面。 也就是说，没有要划一个画面要先经过 A、B、C 三个步骤这回事， 你可以透过纪录当下的所有状态就产出你要得那个画面。 也意味着你可以随时 repaint 当前画面或任何你知道状态的指定画面。 所有的操作都在 JS 里面完成，包含绘制、事件。 * 只要画面一有异动就(意义上的) 重新绘制整个画面 因为有效能问题，所以他们建立虚拟 dom ，只更新有差异的 dom。 这个能够友善的支援各种平台（包括 mobile ）。 http://facebook.github.io/react/ 现场随手速记 https://www.facebook.com/groups/javascript.tw/permalink/424314947669849/ 投影片 http://www.slideshare.net/floydophone/react-preso-v2 ------------------------------------------------------ 11/29 ＠ serious.js web 影片效果器 XD 介绍怎麽用 WebGL 帮现存影片叠加效果器， seriousJS api 设计等， 效果还蛮好的，请参考 http://seriouslyjs.org/ 现场随手速记 https://www.facebook.com/groups/javascript.tw/permalink/424536617647682/ ＠ Web War in China (现场改题为 Web movement in china ) 这讲者做了 js patterns 收集专案 project。 http://shichuan.github.io/javascript-patterns/ 启动 mobile boilerplate 专案，并且写了两本相关的书。 因为这是亚洲研讨会，我们想来讨论亚洲发生的事情。 中国还是以 ie78 为大宗，但平台积极推自己的浏览器。 介绍一些中国大网站，像是腾讯，讨论中国的 startup 怎麽应用 html5， 介绍 app-can 这个 hybird mobile solution 。 「开发者讨厌 IE78 ，这 ok 。但在中国这市场可能比很多国家总人口都多。」 （这句话後来在 twitter 上有引来一些回响） 然後说中国有许多手机游戏都正在用 html5 开发。 基本上这议程对我而言没甚麽资讯含量， 讲者介绍的工具现场有人提问只有中文文件，讲者说那只有中文没错。XD jsconf 聊天室里倒是有人讲了一句。 lol [sb-skerch] world of their own... @china 现场随手速记 https://www.facebook.com/groups/javascript.tw/permalink/424546324313378/ 投影片 http://goo.gl/5zovYZ ＠ "Once upon a time, somewhere between your console and browser" 基本上这是在聊可以用哪些东西当作你浏览器的 input， 包括重力加速器、包括 mic 、包括 webcam 、包括各种 api。 不过这个议题有不少部份跟去年的 open cv 议题有重叠。:Q 现场随手速记 https://www.facebook.com/groups/javascript.tw/permalink/424555324312478/ ＠ Declarative Web Scraping 这个其实是要讲怎麽分析 web 上的语意跟文字， 用来做一些索引或之类的工作。 但因为讲者现场的投影片效果不好跟讲题太过艰涩跟跳跃， 导致实际上很多人都表达他们无法了解讲者在讲什麽。Orz 大概是本次大会里面个人最失望的一个议程。 讲者本身有参与这个专案的服务 https://krake.io/ 现场随手速记 https://www.facebook.com/groups/javascript.tw/permalink/424559854312025/ ＠ Meteor: Under the hood of a full-stack framework for building pure javascript apps. 基本上就是介绍 meteor.js ，一个希望一套程式码， 可以同时跑在 client 跟 server 的 framework。 现场采用 live demo 的方式介绍，确实让人体验到他的有趣之处。 现场随手速记 https://www.facebook.com/groups/javascript.tw/permalink/424576547643689/ ＠ Fun with sockets Web Socket 的深入探讨与应用，作者介绍他运用 web socket， 从一对一的装置资讯传输一路进展到多对多的装置通讯。 并且介绍一些其中的观念。 其中运用 redis 做 pop-sub 事件发送。 值得一提得事情是这个讲者的简报本身就是一个 web socket 的超棒 demo。 他提供一个网址让台下听众可以连接，连过去的网页会显示台上的简报资讯， 而且会随着讲者切换页面的状态，跟着显示讲者目前投影片的更多内容。 非常令人印象深刻。 现场随手速记 https://www.facebook.com/groups/javascript.tw/permalink/424582484309762/ ＠ Pointing forward 由 Tim 介绍目前由微软跟 Mozilla 正在送件中的新版 Pointer 事件。 也介绍一些触碰需要注意的事情，如目标物太小会难以点击、 一些旧的滑鼠事件如 hover 在触碰下几乎不能运作等 现场随手速记 https://www.facebook.com/groups/javascript.tw/permalink/424586670976010/ 投影片 http://goo.gl/HNBhWP ＠ Building Fast Scalable Game-Server in NodeJS 从杭州来的中国讲者介绍他们怎麽实作 html5 MMO-RPG 的经验。 主要都是在介绍 pomelo 这套 framework https://github.com/NetEase/pomelo 这个讲题蛮值得一看得，其中提到许多游戏无法 scale 的问题瓶颈， 有兴趣搞类似游戏的，这份投影片相当值得参考 现场随手速记 https://www.facebook.com/groups/javascript.tw/permalink/424598104308200/ 投影片 http://www.slideshare.net/xieccy/pomelo-jsconfasia ＠ Emuilating with JavaScript 相信大家都看过 jslinux XD http://bellard.org/jslinux/ 这个议题跟这个有点像，怎麽用 JS 去模拟一个简单而完整的硬体。 由 Atlassian 的工程师为我们介绍怎麽模拟 CPU、记忆卡、显示卡。XD 其中主要是模拟早期的 cpu 跟游戏主机， 现场还播放一小段早期任天堂的广告。 讲题中绝大多数都在讲如何实作 cpu 时脉、memory 怎麽运作， 游戏控制器如何跟 cpu、记忆体协作，并且怎麽用 javascript 去模拟。 非常的「硬派」，只能说这就是工程师的浪漫啊。 https://github.com/alexanderdickson/Chip-8-Emulator http://blog.alexanderdickson.com/javascript-chip-8-emulator 现场随手速记 https://www.facebook.com/groups/javascript.tw/permalink/424603644307646/ ＠ Frame.js 这个是 web 线上影片编辑器， 作者一边 demo 他的影片作品一边介绍这个编辑器。 这一场实际上比较像是微电影发表会。但真的很酷。XD sample http://mrdoob.github.io/frame.js/editor/ 现场随手速记 https://www.facebook.com/groups/javascript.tw/permalink/424608367640507/ ＠ Lighting talks ，这次活动跟上次不同之处是有欢迎六位讲者上来分享专案 #1 台湾的 clkao 分享用 JavaScript 控制 database https://github.com/clkao/plv8x #2 讲者介绍利用 livescript 写 functional javascript #3 scrollback 开发者介绍 scrollback 服务 #4 counder.sg 提供新创公司需要的资源。像是各种协议文件的样板并附上完整说明，并且 允许自由编辑。 #5 three.js 的有趣应用 Chasing Bezier,Birds,kinetic rain,fish.js http://jabtunes.com/labs/3d/bezierlights/windows.html http://threejs.org/examples/canvas_geometry_birds.html #6 Fries 一套长得像 android 原生元件的 web compoennt 包 https://github.com/jaunesarmiento/fries 现场随手速记 https://www.facebook.com/groups/javascript.tw/permalink/424590540975623/ ＠ 结尾致词 现场总共 195 个人，来与会的来宾超过二十个国家， 介绍跟回味这几天的议题跟场地的环境， 最後以大合照与给全场工作人员的掌声做结。 现场随手速记 https://www.facebook.com/groups/javascript.tw/permalink/424619320972745/ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ btw 台湾这趟去 12 个人， 算是仅次於主办单位菲律宾、新加坡以外的第三大地区了。 我记得去年我们好像去八个吧。XD 活动相簿在这里，纯手机拍照而且大多拍得很随意，有点糊请见谅。 http://goo.gl/pOJ8j5 台湾人拍照区～～（因为走得很赶，有错过的就拍血啦～～（汗）） 我跟 Ryan 跟 kkbox 开发者们 http://goo.gl/WrZ64I g0v 团 http://goo.gl/fkUWXo ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 今年是第二年去亚洲 JS 开发者年会了，有一些感想， 其实我觉得在现在的台湾，我们把视野放在让很糟糕专案执行的好一点， 说穿了我们大多是在做过去的生意，这很好、不是不好。 但我们在望向过去的同时，也应该去了解一下世界上的趋势， 去发现那些我们可以运用创造力跟想像力能达成的事务。 为什麽不能用 js 控制硬体，为什麽不能用 js 写影片编辑器， 这世界这麽大，总是会有些人去发挥他们的创意，因为他们是工程师。 工程师除了一只眼睛照单一一接单操课以外，我们也得留只眼睛， 去留意那些可能顺手就被我们错过的可能的点子、可能的工作方式， 慢慢的去了解这些各种有趣的新潮流。 然後不管你能不能应用在工作上、要不要应用在工作上， 这都很有助於保有你心里的那份想像力跟创造力。 -- 虚实之间的世界，反抗军与启蒙军的交集 带着 Android 去旅行、去发现 在身边浑然不觉的 另一个世界。 全世界，都是我们的 足迹与游乐场。 ~ The world around you is not what it seems. ~ http://ingress.tw --

※ 发信站: 批踢踢实业坊(ptt.cc) ◆ From: 220.137.245.211 ※ TonyQ:转录至看板 Soft_Job 12/02 17:06 ※ TonyQ:转录至看板 Web_Design 12/02 17:07 ※ 编辑: TonyQ 来自: 220.137.245.211 (12/02 17:12) ※ 编辑: TonyQ 来自: 220.137.245.211 (12/02 17:17) ※ 编辑: TonyQ 来自: 220.137.245.211 (12/02 17:18) ※ 编辑: TonyQ 来自: 220.137.245.211 (12/02 18:59) ※ 编辑: TonyQ 来自: 118.168.129.16 (12/03 10:15)