面孔网参加中国开源周的开源主题讨论，发表的演讲PPT。创始人任一首次亮相，演讲的题目是，《为什么Javascript比Java更靠谱：开源移动开发框架Julia的思路和案例分享》。 视频可参见： http://video.sina.com.cn/v/b/63300688-2086429551.html 观众互动： http://you.video.sina.com.cn/b/63316286-2086429551.html

1. Javascript Java

2. Java/XML = Android
• Java
• Android Subclassing
• XML

3. Java
• 2.2 JIT
• Eclipse
• met/src/cc/miankong/julia/...
cd ../../../ “ ”

4. Javascript
•
•
• GUI
•
• Chrome
• Julia

5. Android
• ViewGroup View?
• Subclassing
• Smalltalk subclassing
• iOS subclassing

6. Android
setPositiveButton(
android.R.string.ok,
new AlertDialog.onClickListener() {
public void onClick(
DialogInterface d, int which) {
...
}
})
onClickListener Java

7. Julia
Controller
touched: function(what) {
if (what === “1”) {
// ok
}
// cancel
}

8. XML
XML
<?xml version=”1.0” encoding=”utf-8”?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”
android:shape=”rectangle”>
<gradient
android:startColor=”#414141”
android:centerColor=”#202020”
android:endColor=”#080808”
android:angle=”270”
/>
</shape>

9. Julia
HTML5/CSS3 View
<div class=”btn” data-touchable=”takePicture”>
<label class=”cam-gradient”></label>
</div>

10. Android ListView
• Adapter
• ListView

12. Model + Template
<ul class="table">
! ! {% for(var i=0; i < x.length; i++) { %}
! ! <li data-touchable="pushProfileView"
! ! ! data-user="{{ x[i].gid }}:{{ x[i].screenName }}">
! ! ! {% if (x[i].profileImageUrl) { %}
! ! ! ! <img src="{{ x[i].profileImageUrl }}">
! ! ! {% } %}
! ! ! <div><label>{{ x[i].screenName }}</label></div>
! ! ! <span class="more"></span>
! ! </li>
! ! {% } %}
</ul>

13. Model + Template
JSP Model
View

14. RESTful Model
URL + Converter
refresh : function(postId, apiUrl) {
! ! var url = apiUrl
|| (appNamespace.HOST + "/api/met/get"),
! ! ! data = {id: postId};
! ! this.oauthREST(url, data, function(self, response) {
! ! ! self.patch(response);
! ! ! self.set({x: response});
! ! }, null);
! }

15. Julia MVC
• HTML5/CSS3 View
• REST Model
• JSP Template
• Delegation

16. Julia SQLite
jsi.sqlInsert(
"keyvalue",
{
key:
appNamespace.SNAP_HINT_DISPLAYED_KEY,
value: "1"
},
function(lastRow){});

17. Julia SQLite
• Table
•
• HTML5 Web Worker Web
Storage

18. Julia
• JS
Julia
• Template
• DOM Webkit
Reflow/Layout
• CSS3

19. Julia
DOM
NavigationView
View View
DIV

21. • Python/Ruby/
Apache HttpClient
•
•
•

22. Julia
API JS
http://www.miankong.cc/julia/