Expert JavaScript Programming

Most important topic first

•  What I want to talk is…

Thank you Tarek!

• 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!

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

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より転載

My Current Job

I’m crea?ng games on ngCore. Please download it!

Expert Python Programming

•  All acendees must have it, aren’t they?

当然、全員持っていますよね？


•  So, you are already Python expert!

みなさんはすでにPythonエキスパートなので


•  I don’t have to describe Python at all.

Pythonの説明は必要ありませんね？

•  I will describe JavaScript along with Expert Python Programming.

So…

エキPyに沿ってJavaScriptの説明をします

•  I will describe JavaScript along with Expert Python.

So…

エキPyに沿ってJavaScriptの説明をします

Premise…

•  Wri?ng code more than 1000 lines. •  Program runs on not only browser but also desktop and server

大きめのコードを書く前提で説明します

Chapter 1. Open your text book P9

29ページを開いてください。

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というインタラクティブシェルを入れよう

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いいです。



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;}; })();

名前空間を大切に

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 }; };

自己書き換え関数は色々用途あり



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にもディスクリプタありますよ！



Choosing Good Names!

•  Good names are important for JavaScript too!

Of course!!

もちろん、JavaScriptでも良い名前重要です



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.

複数モジュールを使う設計は大規模には必要

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]; };

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;})();



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楽しいよ



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でもコード管理重要です



Managing Life Cycle

•  Managing Life Cycle is important for JavaScript too!

Of course!!

もちろん、JavaScriptでもライフサイクル重要



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が便利だけど・・・

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拡張作ってます



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!



Optimization

•  Python’s strategy of op?miza?on is as same as JavaScript too!

Of course!!

最適化の戦略はPythonもJSも一緒！

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だとエンジンごとのクセがあるので注意



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.

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 */ } );

使ったことないけど、たぶん便利

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. });

スリープソートみたいな仕組みですが便利

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

非同期を挟むときはコールバック重要

Most important topic should be talk first

•  What I want to talk is…

Thank you Tarek!

• 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!

Thank you all!

Technology

Expert JavaScript Programming