我用 Node.js 開發自己的 Web 瀏覽器

失去瀏覽器為依靠的 JavaScript，令人感到不安、充滿焦慮。到底是瀏覽器成就了我，還是我成就了瀏覽器？ 既然感到害怕，就面對他吧！既然是 Open Source Developer，就動手做吧！用 Node.js 來開發自己的 Web 瀏覽器，支援 HTML5/CSS3/WebGL 等最新標準的瀏覽器！

Transcript

1. 我用 Node.js 開發自己的 Web 瀏覽器？
2. Fred 錢逢祥
3. Fred 錢逢祥
4. fred@mandice.com fred-zone.blogspot.com
5. Mandice
6. Stem OS
7. It’s hard to make this 其實這次簡報很難寫
8. As a Draftee 身為役男
9. 保持中立 時事梗都不能用
10. Never Live Demo 的萬能解藥 我也很想用神奇的布啊！
11. 冤
12. 在台北國際會議中心 我是第一個在國際舞臺上 喊冤的講者
14. JavaScript 開發者
15. 你了解嗎？ Event-driven
16. 你會應用在程式裡嗎？ Event-driven
17. 你會應用在生活中嗎？ Event-driven
19. 你靜坐再多次也查不到的 COSCUP 講者的真相 while(true) { sit_in(); } truth();
20. fred.on(‘coscup’, createIdea); 9 個月都想不到題目 CFP 截稿前 9 分鐘 靈感才爆發
21. fred.on(‘coscup’, makeSlide); 今天要上台 早上才起來寫簡報 2013.8.4 05:35 AM
22. fred.on(‘coscup’, fixBug); 無論什麼 Bug 在上台前一刻都可以修好
23. fred.on(‘coscup’, liveCoding); 如果沒有修好 台上 Live Coding 繼續修
24. 大致都是遵守 Event-driven 基本上 COSCUP 的講者
25. 沒有 COSCUP Event 就沒有希望
26. fred.emit(‘coscup’) Fire COSCUP Event 講者都是人類最強士兵
27. 結論
28. 贊助 COSCUP = 提高公司生產力
29. 贊助 COSCUP = Fixed Critical Bug
30. 贊助 COSCUP
31. 產品可以出貨了呢！
33. You know it 現在你知道真相了
34. 我用 Node.js 開發自己的 Web 瀏覽器？
35. 我用 Node.js 開發自己的 Web 瀏覽器？ 這個主題，根本是當時未經大腦的自殺行為
36. JavaScript 為瀏覽器而生
37. 因瀏覽器而壯大
38. 到底雞生蛋還蛋生雞 JavaScript 開發瀏覽器？
39. But 但是
40. 不可否認 Fire COSCUP Event 前 是自殺行為
41. fred.emit(‘coscup’) Fire COSCUP Event 後 人類最強士兵
42. 因 COSCUP 而多采多姿 我的服役生涯
43. 搞小孩、送公文、查水錶... blah 在萬里深山的小學裡
44. 開發了很多自動化工具 發揮宅宅工程師懶惰本色
45. Enjoy My Life 現在我的平日生活
46. 思考怎麼樣不開天窗 所以有空餘時間
48. barbarian at github Barbarian
49. npm install barbarian NPM Module
50. barbarian at github 用 Node.js 開發 Browser
51. How to use Barbarian var Barbarian = require('barbarian'); var barbarian = new Barbarian(); barbarian.init(function() { barbarian.createWindow('http://coscup.org/'); });
52. Live Demo
54. Chromium Embedded Framework CEF
55. https://code.google.com/p/chromiumembedded/ CEF
56. • Open source project • Founded By Marshall Greenblatt in 2008 • Web browser control based on Chromium CEF
57. • Blink! • Using CEF in your native application • Support all of Chromium features • HTML5/CSS3/WebGL • WebRTC, Webcam and speech input • off-screen rendering support • Cross-platform(Linux, Windows, Mac) • C/C++, Java, .Net, .net/Mono, Python, Delphi CEF Features JavaScript?
61. CEF1 Single process implementation using the Chromium WebKit API.
62. CEF3 • Multi process implementation using the Chromium Content API. • Better performance • Faster access new features
63. !!! 我的講題有救了
64. 寫個 Node.js Native Module + CEF 理論上
65. Barbarian
66. It’s hard to make Node.js Binding 實際上困難重重
67. • Event-loop ◦ Using libuv to do integration • Multi-process ◦ making a single executable binary ◦ UI/Renderer Process • Multi-thread ◦ buggy ◦ Lost events ◦ Event Handler crashes ◦ Segmentation faults with Node.js Issues
68. Live Reviewing Code
69. Anyways 無論如何
70. It works 總算是可以動了
71. Load Resources with Barbarian barbarian.createWindow('barbarian://content/'); PS. Loading index.html by default
72. Specific Resource Path barbarian.content.mainPath = path.join(__dirname, 'content');
73. Live Demo
74. Internal Request barbarian.createWindow('barbarian://engine/'); barbarian.on('request', function(req, res) { res.set('Content-Type', 'text/html'); res.end('<h1>Nice Barbarian!</h1>'); });
75. Live Demo
76. Customize JS APIs for Web Page
77. Oops Many Critical Bugs
78. • Page Control • Extenssion • IPC between Node.js and Chromium’s JS Engine • API to customize URL prefix (ex, hello://) • Cross-platform TODO
80. 你也知道 離明年 COSCUP 還很久
81. 我怎麼做的完？ How can I finish it?
82. Welcome to Contribute orz
83. Q & A 讓你打臉時間
84. Thanks