$30 off During Our Annual Pro Sale. View Details »

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

Fred Chien
August 05, 2013

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

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

Fred Chien

August 05, 2013
Tweet

More Decks by Fred Chien

Other Decks in Programming

Transcript

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

    View Slide

  2. Fred
    錢逢祥

    View Slide

  3. Fred
    錢逢祥

    View Slide

  4. [email protected]
    fred-zone.blogspot.com

    View Slide

  5. Mandice

    View Slide

  6. Stem OS

    View Slide

  7. It’s hard to make this
    其實這次簡報很難寫

    View Slide

  8. As a Draftee
    身為役男

    View Slide

  9. 保持中立
    時事梗都不能用

    View Slide

  10. Never Live Demo 的萬能解藥
    我也很想用神奇的布啊!

    View Slide


  11. View Slide

  12. 在台北國際會議中心
    我是第一個在國際舞臺上
    喊冤的講者

    View Slide

  13. View Slide

  14. JavaScript 開發者

    View Slide

  15. 你了解嗎?
    Event-driven

    View Slide

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

    View Slide

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

    View Slide

  18. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  25. 沒有 COSCUP Event
    就沒有希望

    View Slide

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

    View Slide

  27. 結論

    View Slide

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

    View Slide

  29. 贊助 COSCUP = Fixed Critical Bug

    View Slide

  30. 贊助 COSCUP

    View Slide

  31. 產品可以出貨了呢!

    View Slide

  32. View Slide

  33. You know it
    現在你知道真相了

    View Slide

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

    View Slide

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

    View Slide

  36. JavaScript 為瀏覽器而生

    View Slide

  37. 因瀏覽器而壯大

    View Slide

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

    View Slide

  39. But
    但是

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  47. View Slide

  48. barbarian at github
    Barbarian

    View Slide

  49. npm install barbarian
    NPM Module

    View Slide

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

    View Slide

  51. How to use Barbarian
    var Barbarian = require('barbarian');
    var barbarian = new Barbarian();
    barbarian.init(function() {
    barbarian.createWindow('http://coscup.org/');
    });

    View Slide

  52. Live Demo

    View Slide

  53. View Slide

  54. Chromium Embedded Framework
    CEF

    View Slide

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

    View Slide

  56. ● Open source project
    ● Founded By Marshall Greenblatt in 2008
    ● Web browser control based on Chromium
    CEF

    View Slide

  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?

    View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. CEF1
    Single process implementation using the
    Chromium WebKit API.

    View Slide

  62. CEF3
    ● Multi process implementation using the
    Chromium Content API.
    ● Better performance
    ● Faster access new features

    View Slide

  63. !!!
    我的講題有救了

    View Slide

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

    View Slide

  65. Barbarian

    View Slide

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

    View Slide

  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

    View Slide

  68. Live Reviewing Code

    View Slide

  69. Anyways
    無論如何

    View Slide

  70. It works
    總算是可以動了

    View Slide

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

    View Slide

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

    View Slide

  73. Live Demo

    View Slide

  74. Internal Request
    barbarian.createWindow('barbarian://engine/');
    barbarian.on('request', function(req, res) {
    res.set('Content-Type', 'text/html');
    res.end('Nice Barbarian!');
    });

    View Slide

  75. Live Demo

    View Slide

  76. Customize JS APIs
    for Web Page

    View Slide

  77. Oops
    Many Critical Bugs

    View Slide

  78. ● Page Control
    ● Extenssion
    ● IPC between Node.js and Chromium’s JS
    Engine
    ● API to customize URL prefix (ex, hello://)
    ● Cross-platform
    TODO

    View Slide

  79. View Slide

  80. 你也知道
    離明年 COSCUP 還很久

    View Slide

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

    View Slide

  82. Welcome to Contribute
    orz

    View Slide

  83. Q &
    A
    讓你打臉時間

    View Slide

  84. Thanks

    View Slide