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

42324a396666b26cefbe250aa60e5f26?s=47 Fred Chien
August 05, 2013

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

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

42324a396666b26cefbe250aa60e5f26?s=128

Fred Chien

August 05, 2013
Tweet

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. None
  13. JavaScript 開發者

  14. 你了解嗎? Event-driven

  15. 你會應用在程式裡嗎? Event-driven

  16. 你會應用在生活中嗎? Event-driven

  17. None
  18. 你靜坐再多次也查不到的 COSCUP 講者的真相 while(true) { sit_in(); } truth();

  19. fred.on(‘coscup’, createIdea); 9 個月都想不到題目 CFP 截稿前 9 分鐘 靈感才爆發

  20. fred.on(‘coscup’, makeSlide); 今天要上台 早上才起來寫簡報 2013.8.4 05:35 AM

  21. fred.on(‘coscup’, fixBug); 無論什麼 Bug 在上台前一刻都可以修好

  22. fred.on(‘coscup’, liveCoding); 如果沒有修好 台上 Live Coding 繼續修

  23. 大致都是遵守 Event-driven 基本上 COSCUP 的講者

  24. 沒有 COSCUP Event 就沒有希望

  25. fred.emit(‘coscup’) Fire COSCUP Event 講者都是人類最強士兵

  26. 結論

  27. 贊助 COSCUP = 提高公司生產力

  28. 贊助 COSCUP = Fixed Critical Bug

  29. 贊助 COSCUP

  30. 產品可以出貨了呢!

  31. None
  32. You know it 現在你知道真相了

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

  34. 我用 Node.js 開發自己的 Web 瀏覽器? 這個主題,根本是當時未經大腦的自殺行為

  35. JavaScript 為瀏覽器而生

  36. 因瀏覽器而壯大

  37. 到底雞生蛋還蛋生雞 JavaScript 開發瀏覽器?

  38. But 但是

  39. 不可否認 Fire COSCUP Event 前 是自殺行為

  40. fred.emit(‘coscup’) Fire COSCUP Event 後 人類最強士兵

  41. 因 COSCUP 而多采多姿 我的服役生涯

  42. 搞小孩、送公文、查水錶... blah 在萬里深山的小學裡

  43. 開發了很多自動化工具 發揮宅宅工程師懶惰本色

  44. Enjoy My Life 現在我的平日生活

  45. 思考怎麼樣不開天窗 所以有空餘時間

  46. None
  47. barbarian at github Barbarian

  48. npm install barbarian NPM Module

  49. barbarian at github 用 Node.js 開發 Browser

  50. How to use Barbarian var Barbarian = require('barbarian'); var barbarian

    = new Barbarian(); barbarian.init(function() { barbarian.createWindow('http://coscup.org/'); });
  51. Live Demo

  52. None
  53. Chromium Embedded Framework CEF

  54. https://code.google.com/p/chromiumembedded/ CEF

  55. • Open source project • Founded By Marshall Greenblatt in

    2008 • Web browser control based on Chromium CEF
  56. • 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?
  57. None
  58. None
  59. None
  60. CEF1 Single process implementation using the Chromium WebKit API.

  61. CEF3 • Multi process implementation using the Chromium Content API.

    • Better performance • Faster access new features
  62. !!! 我的講題有救了

  63. 寫個 Node.js Native Module + CEF 理論上

  64. Barbarian

  65. It’s hard to make Node.js Binding 實際上困難重重

  66. • 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
  67. Live Reviewing Code

  68. Anyways 無論如何

  69. It works 總算是可以動了

  70. Load Resources with Barbarian barbarian.createWindow('barbarian://content/'); PS. Loading index.html by default

  71. Specific Resource Path barbarian.content.mainPath = path.join(__dirname, 'content');

  72. Live Demo

  73. Internal Request barbarian.createWindow('barbarian://engine/'); barbarian.on('request', function(req, res) { res.set('Content-Type', 'text/html'); res.end('<h1>Nice

    Barbarian!</h1>'); });
  74. Live Demo

  75. Customize JS APIs for Web Page

  76. Oops Many Critical Bugs

  77. • Page Control • Extenssion • IPC between Node.js and

    Chromium’s JS Engine • API to customize URL prefix (ex, hello://) • Cross-platform TODO
  78. None
  79. 你也知道 離明年 COSCUP 還很久

  80. 我怎麼做的完? How can I finish it?

  81. Welcome to Contribute orz

  82. Q & A 讓你打臉時間

  83. Thanks