Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Fred 錢逢祥

Slide 3

Slide 3 text

Fred 錢逢祥

Slide 4

Slide 4 text

[email protected] fred-zone.blogspot.com

Slide 5

Slide 5 text

Mandice

Slide 6

Slide 6 text

Stem OS

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

As a Draftee 身為役男

Slide 9

Slide 9 text

保持中立 時事梗都不能用

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

冤

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

JavaScript 開發者

Slide 15

Slide 15 text

你了解嗎？ Event-driven

Slide 16

Slide 16 text

你會應用在程式裡嗎？ Event-driven

Slide 17

Slide 17 text

你會應用在生活中嗎？ Event-driven

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

沒有 COSCUP Event 就沒有希望

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

結論

Slide 28

Slide 28 text

贊助 COSCUP = 提高公司生產力

Slide 29

Slide 29 text

贊助 COSCUP = Fixed Critical Bug

Slide 30

Slide 30 text

贊助 COSCUP

Slide 31

Slide 31 text

產品可以出貨了呢！

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

You know it 現在你知道真相了

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

JavaScript 為瀏覽器而生

Slide 37

Slide 37 text

因瀏覽器而壯大

Slide 38

Slide 38 text

到底雞生蛋還蛋生雞 JavaScript 開發瀏覽器？

Slide 39

Slide 39 text

But 但是

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Enjoy My Life 現在我的平日生活

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

barbarian at github Barbarian

Slide 49

Slide 49 text

npm install barbarian NPM Module

Slide 50

Slide 50 text

barbarian at github 用 Node.js 開發 Browser

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Live Demo

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

Chromium Embedded Framework CEF

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

● 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?

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

CEF1 Single process implementation using the Chromium WebKit API.

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

!!! 我的講題有救了

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

Barbarian

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

● 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

Slide 68

Slide 68 text

Live Reviewing Code

Slide 69

Slide 69 text

Anyways 無論如何

Slide 70

Slide 70 text

It works 總算是可以動了

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

Live Demo

Slide 74

Slide 74 text

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

Nice Barbarian!

'); });

Slide 75

Slide 75 text

Live Demo

Slide 76

Slide 76 text

Customize JS APIs for Web Page

Slide 77

Slide 77 text

Oops Many Critical Bugs

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

你也知道 離明年 COSCUP 還很久

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

Welcome to Contribute orz

Slide 83

Slide 83 text

Q & A 讓你打臉時間

Slide 84

Slide 84 text

Thanks