1 Introduction to JavaScript Programming, HTML, and JavaScript.
Expert JavaScript Programming
-
Upload
yoshiki-shibukawa -
Category
Technology
-
view
2.191 -
download
1
description
Transcript of 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?
当然、全員持っていますよね?
Expert Python Programming
• So, you are already Python expert!
みなさんはすでにPythonエキスパートなので
Expert Python Programming
• 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いいです。
Chapter 2. Open your text book P33
57ページを開いてください。
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 }; };
自己書き換え関数は色々用途あり
Chapter 3. Open your text book P63
93ページを開いてください。
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にもディスクリプタありますよ!
Chapter 4. Open your text book P91
123ページを開いてください。
Choosing Good Names!
• Good names are important for JavaScript too!
Of course!!
もちろん、JavaScriptでも良い名前重要です
Chapter 5. Open your text book P117
153ページを開いてください。
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;})();
Chapter 6. Open your text book P143
179ページを開いてください。
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楽しいよ
Chapter 8. Open your text book P183
219ページを開いてください。
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でもコード管理重要です
Chapter 9. Open your text book P207
247ページを開いてください。
Managing Life Cycle
• Managing Life Cycle is important for JavaScript too!
Of course!!
もちろん、JavaScriptでもライフサイクル重要
Chapter 10. Open your text book P223
263ページを開いてください。
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拡張作ってます
Chapter 11. Open your text book P251
295ページを開いてください。
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!
Chapter 11. Open your text book P275
321ページを開いてください。
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だとエンジンごとのクセがあるので注意
Chapter 11. Open your text book P325
371ページを開いてください。
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!