expert javascript programming
DESCRIPTION
Expert JavaScript Programming for Expert Python Programming Readers. This is the lightning talks slide at PyConJP.TRANSCRIPT
![Page 1: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/1.jpg)
Most important topic first
• What I want to talk is…
Thank you Tarek!
![Page 2: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/2.jpg)
• Expert Python Programming is a super cool book! – It provides very pragma?c knowledge for Python programmers. – It provides very acute insight for Other language programmer!
![Page 3: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/3.jpg)
Expert JavaScript Programming for Expert Python Programming Readers
DeNA Co.Ltd., Smartphone SG system group.
Sphinx-‐Users.jp / eXtreme Programming Users Group Japan
PyConJP LT (2011/08/27)
渋川よしき Shibukawa Yoshiki
![Page 4: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/4.jpg)
Self Introduction
• Job – Honda R&D → DeNA – I’m playing Smartphone everyday!
• Community – Sphinx-‐Users.jp Organizer – XPJUG – PySpa
• Books – Simple and Steady Way of Learning for
So`ware Engineers(Gihyo) – Expert Python Programming
(ASCII-‐MW) – Pomodoro Technique illustrated
(ASCII-‐MW) – The Art of Community
(O’reilly Japan)
Twicer: @shibukawa
写真: 清水川webより転載
![Page 5: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/5.jpg)
My Current Job
I’m crea?ng games on ngCore. Please download it!
![Page 6: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/6.jpg)
Expert Python Programming
• All acendees must have it, aren’t they?
当然、全員持っていますよね?
![Page 7: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/7.jpg)
Expert Python Programming
• So, you are already Python expert!
みなさんはすでにPythonエキスパートなので
![Page 8: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/8.jpg)
Expert Python Programming
• I don’t have to describe Python at all.
Pythonの説明は必要ありませんね?
![Page 9: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/9.jpg)
• I will describe JavaScript along with Expert Python Programming.
So…
エキPyに沿ってJavaScriptの説明をします
![Page 10: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/10.jpg)
• I will describe JavaScript along with Expert Python.
So…
エキPyに沿ってJavaScriptの説明をします
![Page 11: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/11.jpg)
Premise…
• Wri?ng code more than 1000 lines. • Program runs on not only browser but also desktop and server
大きめのコードを書く前提で説明します
![Page 12: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/12.jpg)
Chapter 1. Open your text book P9
29ページを開いてください。
![Page 13: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/13.jpg)
Install following tools
• node.js (hcp://nodejs.org) – Good interac?ve shell for JavaScript • Windows
– Use binary package • Linux
– Use apt-‐get or emerge or anything
• MacOSX – Use MacPorts or Homebrew
• npm (hcp://npmjs.org) – easy_install for nodejs
node.jsというインタラクティブシェルを入れよう
![Page 14: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/14.jpg)
Editor is important!
• I’m using Emacs. Sorry Tarek. – js2-‐mode is good! • hcp://code.google.com/p/js2-‐mode • Download source and M-‐x byte-‐compile-‐file • Add following line following lines:
• Other DeNA guys are using Emacs, Vim, Eclipse, WebStorm.
(autoload 'js2-mode "js2" nil t) (add-to-list 'auto-mode-alist '("\\.js$" . js2-mode))
Emacsのjs2-‐modeいいです。
![Page 15: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/15.jpg)
Chapter 2. Open your text book P33
57ページを開いてください。
![Page 16: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/16.jpg)
Save your global namespace!
• Global namespace is important than Python – JavaScript has only one global area.
• 1. Self-‐invoke func?on
• 2. Export only accessor methods
(function() { // This area is private! })();
var getter; (function() { var privateVar = 100; getter = function() {return privateVar;}; })();
名前空間を大切に
![Page 17: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/17.jpg)
Functions that rewrites thyself
• This is good technique for: – Inser?on ini?alize code. – Bridging incompa?bility between browsers. – Crea?ng unit test for browser on node.js. function a() { // initialize code or check compatibility a = function() { // function logic it is used always }; };
自己書き換え関数は色々用途あり
![Page 18: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/18.jpg)
Chapter 3. Open your text book P63
93ページを開いてください。
![Page 19: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/19.jpg)
Descriptor
• JavaScript has descriptor like Python • Call func?on during access object’s property
var obj = {}; var temp = null; Object.defineProperty(obj, "test", { get: function() { return temp; }, set: function(val) { temp = val; } });
JSにもディスクリプタありますよ!
![Page 20: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/20.jpg)
Chapter 4. Open your text book P91
123ページを開いてください。
![Page 21: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/21.jpg)
Choosing Good Names!
• Good names are important for JavaScript too!
Of course!!
もちろん、JavaScriptでも良い名前重要です
![Page 22: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/22.jpg)
Chapter 5. Open your text book P117
153ページを開いてください。
![Page 23: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/23.jpg)
Build tools are important
• Original JavaScript doesn’t have “import” mechanism. – It is important for crea?ng large so`ware. – CommonJS proposes good design. • It is used by node.js and ngcore.
• jQuery builder, closure compiler… many libraries are created with many source files. – Combine all needed sources.
複数モジュールを使う設計は大規模には必要
![Page 24: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/24.jpg)
CommonJS way
• It supports require and exports. • ngCore build tool treats source code like this:
var Button = require(‘./UI/Button’).Button; exports.MyWindow = function() { this.title = “hello world”; this.size = [100, 100, 400, 200]; };
![Page 25: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/25.jpg)
CommonJS way
• It supports require and exports. • ngCore build tool treats source code like this:
var Button = require(‘./UI/Button’).Button; exports.MyWindow = function() { this.title = “hello world”; this.size = [100, 100, 400, 200]; };
MODULES[“modulename”] = (function() { var exports = {}; var require = function(file){ return MODULES[file]; };
return exports;})();
![Page 26: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/26.jpg)
Chapter 6. Open your text book P143
179ページを開いてください。
![Page 27: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/27.jpg)
Writing an Application
• I don’t know what you want to create. • There are many different environment today. – My recommend environment is ngCore. You can create Android and iOS games from same source. Future, ngCore will support HTML5.
環境違いすぎるので・・・ngCore楽しいよ
![Page 28: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/28.jpg)
Chapter 8. Open your text book P183
219ページを開いてください。
![Page 29: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/29.jpg)
Managing Code
• SCM is important for JavaScript too! • I love mercurial. During using git, I some?mes got error because I type hg instead of git.
Of course!!
もちろん、JavaScriptでもコード管理重要です
![Page 30: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/30.jpg)
Chapter 9. Open your text book P207
247ページを開いてください。
![Page 31: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/31.jpg)
Managing Life Cycle
• Managing Life Cycle is important for JavaScript too!
Of course!!
もちろん、JavaScriptでもライフサイクル重要
![Page 32: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/32.jpg)
Chapter 10. Open your text book P223
263ページを開いてください。
![Page 33: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/33.jpg)
Documenting Your Project
• Famous tool in JS community is JSDoc series. – JSDoc-‐toolkit 2.4 is the latest stable version. – JSDoc 3 is now crea?ng. – node-‐jsdoc-‐toolkit is easy to use and fast! • hcps://github.com/p120ph37/node-‐jsdoc-‐toolkit
• Do you like auto generated document? I don’t like. It is hard to write good document.
node-‐jsdoc-‐toolkitが便利だけど・・・
![Page 34: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/34.jpg)
Sphinx! Sphinx! Sphinx!
• Sphinx is good tool for almost all programmers! – You can create becer document! – Easy to learn, easy to write. hard to write Plugin…
• I’m crea?ng CommonJS-‐domain and CommonJS-‐autodoc plugin now. Please wait!
Sphinxがいいよ!CommonJS拡張作ってます
![Page 35: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/35.jpg)
Chapter 11. Open your text book P251
295ページを開いてください。
![Page 36: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/36.jpg)
Test-Driven Development
• I’m using Jasmine. • If your code run in browser or mobile device, you can run logic test on node.js. – Fast feedback! Fast development cycle. – You can install node-jasmine via npm. – “Func?ons that rewrites thyself” technique is useful!
![Page 37: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/37.jpg)
Chapter 11. Open your text book P275
321ページを開いてください。
![Page 38: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/38.jpg)
Optimization
• Python’s strategy of op?miza?on is as same as JavaScript too!
Of course!!
最適化の戦略はPythonもJSも一緒!
![Page 39: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/39.jpg)
Topic only on JavaScript
• Each JavaScript engines have different character: – V8 – V8 for Android – Safari – Safari for iOS – WebView for iOS – Firefox – Internet Explorer…
• You have to profile on the environments you use.
JSだとエンジンごとのクセがあるので注意
![Page 40: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/40.jpg)
Chapter 11. Open your text book P325
371ページを開いてください。
![Page 41: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/41.jpg)
Useful Design-Patterns
• Asynchronous is the most important part of JS – It is a pit fall Java programmer fall – Callback hell! – Sequen?al source code is more readable and easy to understand.
![Page 42: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/42.jpg)
jsdeffered
• jsDeffered – hcp://cho45.stuawsc.com/jsdeferred/
– Sorry I have never used it… – Maybe twisted programmers familiar with this.
next(function() { /* task 1 */ }). next(function() { /* task 2 */ }); chain( function() { /* task 1 */ }, function() { /* task 2 */ } );
使ったことないけど、たぶん便利
![Page 43: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/43.jpg)
Use counter to check async tasks finish
• Try to write following “Counter” class.
• It works similar to sleep sort. Run all tasks at the same ?me and check only the task end.
var counter = new Counter(); fs.writeFile(“METADATA”, data1, counter.newTask()); fs.writeFile(“REQUEST”, data2, counter.newTask()); counter.wait(function() { // All task is finished. });
スリープソートみたいな仕組みですが便利
![Page 44: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/44.jpg)
If there is async call, callback needed
• All func?ons which uses Async call must receive callback func?on. – If not, caller can’t know whether all tasks are finished or not
Async
Pass
Callback func?on Func?on caller
非同期を挟むときはコールバック重要
![Page 45: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/45.jpg)
Most important topic should be talk first
• What I want to talk is…
Thank you Tarek!
![Page 46: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/46.jpg)
• Expert Python Programming is super cool book! – It provides very pragma?c knowledge for Python programmers. – It provides very acute insight for Other language programmer!
![Page 47: Expert JavaScript Programming](https://reader034.vdocuments.net/reader034/viewer/2022052321/5555735fb4c9055f5f8b4a95/html5/thumbnails/47.jpg)
Thank you all!