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

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

Transcript

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

   View Slide

2. Fred
   錢逢祥
   

   View Slide

3. Fred
   錢逢祥
   

   View Slide

4. fred@mandice.com
   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