Ampliando suas fronteiras com Node-Webkit

Slide 1

Slide 1 text

node-webkit

Slide 2

Slide 2 text

Meu nome é Beto Muniz betomuniz.com Sou de Minas Gerais e atualmente trabalho na Questrade pela Augix Outsourcing

Slide 3

Slide 3 text

Ampliando suas fronteiras com node-webkit

Slide 4

Slide 4 text

Mas que é node-webkit?

Slide 5

Slide 5 text

node-webkit é um runtime que foi desenvolvido pela Intel, mas que teve seu código aberto em 2007 e é baseado na união do Webkit com o NodeJS github.com/rogerwang/node-webkit

Slide 6

Slide 6 text

Mas...como assim? Runtime? Webkit?

Slide 7

Slide 7 text

Isso basicamente é a integração de qualquer funcionalidade do nodejs dentro do webkit, que por sua vez é uma web browser engine de código aberto.

Slide 8

Slide 8 text

Mas cara...isso ainda não foi muito claro...

Slide 9

Slide 9 text

Isso quer dizer que qualquer funcionalidade do de ambas as tecnologias é oferecida para utilização, possibilitando assim criação de Desktop WebApps robustos, semelhante ao que acontece ao desenvolver com Phonegap no mundo mobile.

Slide 10

Slide 10 text

Interessante...E o que esse runtime suporta?

Slide 11

Slide 11 text

#1 Módulos NodeJS Nativos #2 Módulos NodeJS de Terceiros #3 Bibliotecas e Frameworks Front-end #4 Manipulação no DOM #5 Praticamente todas as implementações atuais do HTML5 #6 Aceleração nativa de GPU #7 Acesso a Video e Audio #8 Plugins instalados no computador Exemplo: Aplicativos que utilizam flash de alguma forma. #9 Suporte a bases de dados para persistência Web SQL Database, IndexedDB, PouchDB, EJDB, NeDB

Slide 12

Slide 12 text

Mas onde eu rodo/desenvolvo?

Slide 13

Slide 13 text

node-webkit possui uma toolkit CLI que possibilita trabalhar em ambiente Windows, Linux e MacOS sem muitos problemas.

Slide 14

Slide 14 text

Mas porque eu usaria?

Slide 15

Slide 15 text

#1 Fácil implementação #2 Fácil aprendizado #3 API para acesso a GUI do sistema #4 Compila a aplicação para Windows, MacOS e Linux #5 Inspect Element #6 Desktop Notifications #7 Escreva a aplicação uma vez*

Slide 16

Slide 16 text

E a lista toda de features não acabou...

Slide 17

Slide 17 text

#1 Frameless window #2 Utiliza o NPM #3 Documentação muito bem feita #4 Kiosk mode #5 Media APIs #6 HTML5 Support Drag & Drop, Data persistent, WebGL, WebRTC, CSS3, Web Storage, Application Cache, etc.

Slide 18

Slide 18 text

E quem está usando?

Slide 19

Slide 19 text

Popcorn Time

Slide 20

Slide 20 text

Koala App

Slide 21

Slide 21 text

Codiqa

Slide 22

Slide 22 text

Legal!!! Mas como instalar?

Slide 23

Slide 23 text

github.com/mllrsohn/node-webkit-builder [sudo] npm install node-webkit-builder -g

Slide 24

Slide 24 text

E como iniciar uma aplicação?

Slide 25

Slide 25 text

Estrutura mínima para uma aplicação com node-webkit index.html package.json

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

index.html (main file) O main file de sua aplicação é obrigatório, pois será o primeiro arquivo que o runtime irá buscar após interpretar seu package.json

Slide 28

Slide 28 text

package.json

Slide 29

Slide 29 text

Ferramentas

Slide 30

Slide 30 text

Slush Generator com node-webkit, Express e NeDB slush-nodewebkit-express-nedb npmjs.org/package/slush-nodewebkit-express-nedb Slush Generator com node-webkit, Express e IndexedDB slush-nodewebkit-indexeddb npmjs.org/package/slush-nodewebkit-indexeddb

Slide 31

Slide 31 text

Referência

Slide 32

Slide 32 text

Wiki: github.com/rogerwang/node-webkit/wiki

Slide 33

Slide 33 text

And now...

Slide 34

Slide 34 text

Repositório das Demonstrações: github.com/obetomuniz/nw-demos

Slide 35

Slide 35 text

E isso é tudo pessoal... betomuniz.com @obetomuniz github.com/obetomuniz [email protected] speakerdeck.com/obetomuniz