Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Escrevendo Go no front-end com GopherJS - RubyConf 2016

Escrevendo Go no front-end com GopherJS - RubyConf 2016

O GopherJS é um compilador de Go para JavaScript, mas quais são os beneficios e maleficios que nós desenvolvedores temos com uso do GopherJS?

Felipe Oliveira

September 24, 2016
Tweet

More Decks by Felipe Oliveira

Other Decks in Programming

Transcript

  1. 26/09/2016 Escrevendo Go no front­end http://talks.godoc.org/github.com/felipeweb/talks/rubyconf2016/intro_gopherJS.slide#1 2/35 Sobre mim Atualmente

    trabalho como freelancer Lider de desenvolvimento do Mamute github.com/caelum/mamute (https://github.com/caelum/mamute) Autor da lib Gopher Utils github.com/felipeweb/gopher-utils (https://github.com/felipeweb/gopher-utils) Autor da lib Osin Mysql github.com/felipeweb/osin-mysql (https://github.com/felipeweb/osin-mysql) Autor da lib HTML Render github.com/felipeweb/htmlrender (https://github.com/felipeweb/htmlrender) Contribuidor do framework Go Macaron go-macaron.com (https://go-macaron.com)
  2. 26/09/2016 Escrevendo Go no front­end http://talks.godoc.org/github.com/felipeweb/talks/rubyconf2016/intro_gopherJS.slide#1 3/35 Quais plataformas suportam

    Go? Linux (Go nativo), Google OSX (Go nativo), Google Windows (Go nativo), Google Raspberry Pi (Go nativo), Google Android (Go mobile), Google IOS (Go mobile), Google Browser (Gopher JS), Comunidade, com participação de commiters da linguagem Go
  3. 26/09/2016 Escrevendo Go no front­end http://talks.godoc.org/github.com/felipeweb/talks/rubyconf2016/intro_gopherJS.slide#1 4/35 O que GopherJS

    suporta? 100% da Go standard library Grande parte da implementação segue a especificação do Go Defer Panic Recover Goroutines
  4. 26/09/2016 Escrevendo Go no front­end http://talks.godoc.org/github.com/felipeweb/talks/rubyconf2016/intro_gopherJS.slide#1 5/35 Por que usar

    GopherJS? Oportunidade de escrever código Go para rodar em todos os navegadores Familiaridade com ferramentas (gofmt, godoc, ...) Familiaridade com tipos (int, bytes, ...) Checagem de tipos Familiaridade com concorrência, blocking receiving ao invés de callbacks Familiaridade com erros de compilação (refatoração) Uso de bibliotecas de terceiros (Go e JavaScript)
  5. 26/09/2016 Escrevendo Go no front­end http://talks.godoc.org/github.com/felipeweb/talks/rubyconf2016/intro_gopherJS.slide#1 7/35 Dependencias Go NodeJS

    g o g e t - u g i t h u b . c o m / g o p h e r j s / g o p h e r j s n p m i n s t a l l - - g l o b a l s o u r c e - m a p - s u p p o r t
  6. 26/09/2016 Escrevendo Go no front­end http://talks.godoc.org/github.com/felipeweb/talks/rubyconf2016/intro_gopherJS.slide#1 8/35 Hello GopherJS Hello

    com JavaScript c o n s o l e . l o g ( " H e l l o J S " ) ; Hello Go p a c k a g e m a i n i m p o r t " f m t " f u n c m a i n ( ) { f m t . P r i n t l n ( " H e l l o J S w i t h G o " ) }
  7. 26/09/2016 Escrevendo Go no front­end http://talks.godoc.org/github.com/felipeweb/talks/rubyconf2016/intro_gopherJS.slide#1 9/35 Hello GopherJS HTML

    < ! D O C T Y P E h t m l > < h t m l l a n g = " e n " > < h e a d > < m e t a c h a r s e t = " U T F - 8 " > < t i t l e > H e l l o < / t i t l e > < / h e a d > < b o d y > < s c r i p t t y p e = " t e x t / j a v a s c r i p t " s r c = " h e l l o j s . j s " > < / s c r i p t > < s c r i p t t y p e = " t e x t / j a v a s c r i p t " s r c = " h e l l o j s w i t h g o . j s " > < / s c r i p t > < / b o d y > < / h t m l > Compilando o arquivo Go para JavaScript g o p h e r j s b u i l d - o h e l l o j s w i t h g o . j s /Users/felipeweb/Code/go/src/github.com/felipeweb/talks/rubyconf2016/hello.html (#ZgotmplZ)
  8. 26/09/2016 Escrevendo Go no front­end http://talks.godoc.org/github.com/felipeweb/talks/rubyconf2016/intro_gopherJS.slide#1 10/35 Manipulando o DOM

    com GopherJS DOM Go p a c k a g e m a i n i m p o r t " g i t h u b . c o m / g o p h e r j s / g o p h e r j s / j s " f u n c m a i n ( ) { j s . G l o b a l . G e t ( " w i n d o w " ) . S e t ( " o n l o a d " , f u n c ( ) { g o f u n c ( ) { b o d y : = j s . G l o b a l . G e t ( " d o c u m e n t " ) . G e t ( " b o d y " ) b o d y . G e t ( " s t y l e " ) . S e t ( " b a c k g r o u n d - c o l o r " , " r e d " ) i m g : = j s . G l o b a l . G e t ( " d o c u m e n t " ) . C a l l ( " c r e a t e E l e m e n t " , " i m g " ) i m g . S e t ( " s r c " , " g o p h e r . p n g " ) b o d y . C a l l ( " a p p e n d C h i l d " , i m g ) } ( ) } ) }
  9. 26/09/2016 Escrevendo Go no front­end http://talks.godoc.org/github.com/felipeweb/talks/rubyconf2016/intro_gopherJS.slide#1 11/35 Manipulando o DOM

    com GopherJS HTML < ! D O C T Y P E h t m l > < h t m l l a n g = " e n " > < h e a d > < m e t a c h a r s e t = " U T F - 8 " > < t i t l e > D O M < / t i t l e > < / h e a d > < b o d y > < s c r i p t t y p e = " t e x t / j a v a s c r i p t " s r c = " d o m . j s " > < / s c r i p t > < / b o d y > < / h t m l > Compilando o arquivo Go para JavaScript g o p h e r j s b u i l d d o m . g o - o d o m . j s /Users/felipeweb/Code/go/src/github.com/felipeweb/talks/rubyconf2016/dom.html (#ZgotmplZ)
  10. 26/09/2016 Escrevendo Go no front­end http://talks.godoc.org/github.com/felipeweb/talks/rubyconf2016/intro_gopherJS.slide#1 12/35 Manipulando o DOM

    com GopherJS (DOM lib) Instalando a biblioteca de DOM g o g e t - u h o n n e f . c o / g o / j s / d o m DOM com a lib Go p a c k a g e m a i n i m p o r t " h o n n e f . c o / g o / j s / d o m " f u n c m a i n ( ) { d o m . G e t W i n d o w ( ) . A d d E v e n t L i s t e n e r ( " l o a d " , f a l s e , f u n c ( e d o m . E v e n t ) { g o f u n c ( ) { b o d y : = d o m . G e t W i n d o w ( ) . D o c u m e n t ( ) . G e t E l e m e n t B y I D ( " b o d y " ) b o d y . S e t A t t r i b u t e ( " s t y l e " , " b a c k g r o u n d - c o l o r : r e d " ) i m g : = d o m . G e t W i n d o w ( ) . D o c u m e n t ( ) . C r e a t e E l e m e n t ( " i m g " ) i m g . S e t A t t r i b u t e ( " s r c " , " g o p h e r . p n g " ) b o d y . A p p e n d C h i l d ( i m g ) } ( ) } ) }
  11. 26/09/2016 Escrevendo Go no front­end http://talks.godoc.org/github.com/felipeweb/talks/rubyconf2016/intro_gopherJS.slide#1 13/35 Manipulando o DOM

    com GopherJS (DOM lib) HTML < ! D O C T Y P E h t m l > < h t m l l a n g = " e n " > < h e a d > < m e t a c h a r s e t = " U T F - 8 " > < t i t l e > D O M < / t i t l e > < / h e a d > < b o d y i d = " b o d y " > < s c r i p t t y p e = " t e x t / j a v a s c r i p t " s r c = " d o m _ w i t h _ l i b . j s " > < / s c r i p t > < / b o d y > < / h t m l > Compilando o arquivo Go para JavaScript g o p h e r j s b u i l d d o m _ w i t h _ l i b . g o - m - o d o m _ w i t h _ l i b . j s /Users/felipeweb/Code/go/src/github.com/felipeweb/talks/rubyconf2016/dom_with_lib.h (#ZgotmplZ)
  12. 26/09/2016 Escrevendo Go no front­end http://talks.godoc.org/github.com/felipeweb/talks/rubyconf2016/intro_gopherJS.slide#1 16/35 Jquery GopherJS Adicionando

    Jquery ao $GOPATH g o g e t - u g i t h u b . c o m / g o p h e r j s / j q u e r y DOM Go com Jquery p a c k a g e m a i n i m p o r t " g i t h u b . c o m / g o p h e r j s / j q u e r y " f u n c m a i n ( ) { j q u e r y . N e w J Q u e r y ( ) . R e a d y ( f u n c ( ) { j q u e r y . N e w J Q u e r y ( " b o d y " ) . S e t C s s ( " b a c k g r o u n d - c o l o r " , " r e d " ) j q u e r y . N e w J Q u e r y ( " b o d y " ) . A p p e n d ( " < i m g s r c = \ " g o p h e r . p n g \ " / > " ) } ) }
  13. 26/09/2016 Escrevendo Go no front­end http://talks.godoc.org/github.com/felipeweb/talks/rubyconf2016/intro_gopherJS.slide#1 17/35 Jquery GopherJS HTML

    < ! D O C T Y P E h t m l > < h t m l l a n g = " e n " > < h e a d > < m e t a c h a r s e t = " U T F - 8 " > < t i t l e > j q u e r y < / t i t l e > < / h e a d > < b o d y > < s c r i p t t y p e = " t e x t / j a v a s c r i p t " s r c = " h t t p s : / / c o d e . j q u e r y . c o m / j q u e r y - 3 . 1 . 0 . m i n . j s " > < / s c r i p t > < s c r i p t t y p e = " t e x t / j a v a s c r i p t " s r c = " d o m _ w i t h _ j q u e r y . j s " > < / s c r i p t > < / b o d y > < / h t m l > Compilando o arquivo Go para JavaScript g o p h e r j s b u i l d d o m _ w i t h _ j q u e r y . g o - m - o d o m _ w i t h _ j q u e r y . j s /Users/felipeweb/Code/go/src/github.com/felipeweb/talks/rubyconf2016/dom_with_jque (#ZgotmplZ)
  14. 26/09/2016 Escrevendo Go no front­end http://talks.godoc.org/github.com/felipeweb/talks/rubyconf2016/intro_gopherJS.slide#1 18/35 Ajax GopherJS p

    a c k a g e m a i n i m p o r t ( " n e t / h t t p " " i o / i o u t i l " " g i t h u b . c o m / f e l i p e w e b / g o p h e r - u t i l s " " h o n n e f . c o / g o / j s / d o m " ) f u n c m a i n ( ) { r e s , e r r : = h t t p . G e t ( " h t t p : / / a p i . p o s t m o n . c o m . b r / v 1 / c e p / 0 1 3 1 3 0 2 0 " ) i f e r r ! = n i l { p a n i c ( e r r ) } b y t e s , e r r : = i o u t i l . R e a d A l l ( r e s . B o d y ) i f e r r ! = n i l { p a n i c ( e r r ) } d : = d o m . G e t W i n d o w ( ) . D o c u m e n t ( ) p : = d . C r e a t e E l e m e n t ( " p " ) . ( * d o m . H T M L P a r a g r a p h E l e m e n t ) p . S e t T e x t C o n t e n t ( g o p h e r _ u t i l s . T o S t r ( b y t e s ) ) c o n t e n t : = d . G e t E l e m e n t B y I D ( " c o n t e n t " ) . ( * d o m . H T M L D i v E l e m e n t ) c o n t e n t . A p p e n d C h i l d ( p ) }
  15. 26/09/2016 Escrevendo Go no front­end http://talks.godoc.org/github.com/felipeweb/talks/rubyconf2016/intro_gopherJS.slide#1 21/35 Defer GopherJS p

    a c k a g e m a i n i m p o r t ( " f m t " " t i m e " ) f u n c m a i n ( ) { d e f e r w o r l d ( ) f m t . P r i n t l n ( " H e l l o " ) } f u n c w o r l d ( ) { t i m e . S l e e p ( 5 * t i m e . S e c o n d ) f m t . P r i n t l n ( " W o r l d " ) } O defer é resovido em tempo de compilação do código para JavaScript /Users/felipeweb/Code/go/src/github.com/felipeweb/talks/rubyconf2016/defer.html (#ZgotmplZ)
  16. 26/09/2016 Escrevendo Go no front­end http://talks.godoc.org/github.com/felipeweb/talks/rubyconf2016/intro_gopherJS.slide#1 22/35 Panic e Recover

    f u n c P a r s e ( i n p u t s t r i n g ) ( n u m b e r s [ ] i n t , e r r e r r o r ) { d e f e r f u n c ( ) { i f r : = r e c o v e r ( ) ; r ! = n i l { v a r o k b o o l e r r , o k = r . ( e r r o r ) i f ! o k { e r r = f m t . E r r o r f ( " p k g : % v " , r ) } } } ( ) f i e l d s : = s t r i n g s . F i e l d s ( i n p u t ) n u m b e r s = f i e l d s 2 n u m b e r s ( f i e l d s ) r e t u r n }
  17. 26/09/2016 Escrevendo Go no front­end http://talks.godoc.org/github.com/felipeweb/talks/rubyconf2016/intro_gopherJS.slide#1 23/35 Panic e Recover

    Panic é convertido para o tipo Error do JavaScript Recover é controlado por meio de try e catch /Users/felipeweb/Code/go/src/github.com/felipeweb/talks/rubyconf2016/recover.html (#ZgotmplZ)
  18. 26/09/2016 Escrevendo Go no front­end http://talks.godoc.org/github.com/felipeweb/talks/rubyconf2016/intro_gopherJS.slide#1 24/35 Goroutines e Chanels

    / / s t a r t t o m o v e s n a k e t i c k e r : = t i m e . N e w T i c k e r ( s p e e d ) q u i t : = m a k e ( c h a n s t r u c t { } ) g o f u n c ( ) { f o r { s e l e c t { c a s e < - t i c k e r . C : s n a k e M o v e ( q u i t , d ) c a s e < - q u i t : t i c k e r . S t o p ( ) r e t u r n } } } ( ) github.com/felipeweb/talks/blob/master/rubyconf2016/snake.go (https://github.com/felipeweb/talks/blob/master/rubyconf2016/snake.go) O GopherJS fica manipulando a pilha de instruções a serem executadas /Users/felipeweb/Code/go/src/github.com/felipeweb/talks/rubyconf2016/snake.html (#ZgotmplZ)
  19. 26/09/2016 Escrevendo Go no front­end http://talks.godoc.org/github.com/felipeweb/talks/rubyconf2016/intro_gopherJS.slide#1 25/35 Além da lib

    Jquery e DOM existe outras :) AngularJS: github.com/neelance/go-angularjs (https://github.com/neelance/go-angularjs) Canvas: github.com/emersion/go-js-canvas (https://github.com/emersion/go-js-canvas) Chrome API github.com/fabioberger/chrome (https://github.com/fabioberger/chrome) D3: github.com/iansmith/d3 (https://github.com/iansmith/d3) DOM: honnef.co/go/js/dom (http://honnef.co/go/js/dom)
  20. 26/09/2016 Escrevendo Go no front­end http://talks.godoc.org/github.com/felipeweb/talks/rubyconf2016/intro_gopherJS.slide#1 26/35 Além da lib

    Jquery e DOM existe outras :) EventSource github.com/gopherjs/eventsource (https://github.com/gopherjs/eventsource) JQuery: github.com/gopherjs/jquery (https://github.com/gopherjs/jquery) JS Builtins: github.com/gopherjs/jsbuiltin (https://github.com/gopherjs/jsbuiltin) JS console: honnef.co/go/js/console (http://honnef.co/go/js/console) Polymer: code.palmstonegames.com/polymer (https://code.palmstonegames.com/polymer)
  21. 26/09/2016 Escrevendo Go no front­end http://talks.godoc.org/github.com/felipeweb/talks/rubyconf2016/intro_gopherJS.slide#1 27/35 Além da lib

    Jquery e DOM existe outras :) VueJS: github.com/oskca/gopherjs-vue (https://github.com/oskca/gopherjs-vue) localStorage: github.com/go-humble/locstor (https://github.com/go-humble/locstor) PouchDB: github.com/flimzy/go-pouchdb (https://github.com/flimzy/go-pouchdb) QUnit: github.com/rusco/qunit (https://github.com/rusco/qunit) SQL.js: github.com/flimzy/go-sql.js (https://github.com/flimzy/go-sql.js)
  22. 26/09/2016 Escrevendo Go no front­end http://talks.godoc.org/github.com/felipeweb/talks/rubyconf2016/intro_gopherJS.slide#1 28/35 Além da lib

    Jquery e DOM existe outras :) WebGL: github.com/gopherjs/webgl (https://github.com/gopherjs/webgl) WebSocket: github.com/gopherjs/websocket (https://github.com/gopherjs/websocket) XHR: honnef.co/go/js/xhr (http://honnef.co/go/js/xhr) Mithril: github.com/danverbraganza/go-mithril (https://github.com/danverbraganza/go-mithril) Ace: maunium.net/go/gopher-ace (https://maunium.net/go/gopher-ace)
  23. 26/09/2016 Escrevendo Go no front­end http://talks.godoc.org/github.com/felipeweb/talks/rubyconf2016/intro_gopherJS.slide#1 31/35 Qual é o

    cenério ideal para se usar GopherJS? Angular JS React Vecty (framework react like criado pela comunidade GopherJS)
  24. 26/09/2016 Escrevendo Go no front­end http://talks.godoc.org/github.com/felipeweb/talks/rubyconf2016/intro_gopherJS.slide#1 32/35 Sobre o Vecty

    Código github.com/gopherjs/vecty (https://github.com/gopherjs/vecty) Exemple github.com/gopherjs/vecty/tree/master/examples/todomvc (https://github.com/gopherjs/vecty/tree/master/examples/todomvc) Server localhost:8080/github.com/gopherjs/vecty/examples/todomvc/ (http://localhost:8080/github.com/gopherjs/vecty/examples/todomvc/)
  25. 26/09/2016 Escrevendo Go no front­end http://talks.godoc.org/github.com/felipeweb/talks/rubyconf2016/intro_gopherJS.slide#1 34/35 Thank you Felipe

    Paes de Oliveira [email protected] (mailto:[email protected]) https://www.felipeweb.net.br (https://www.felipeweb.net.br) https://github.com/felipeweb (https://github.com/felipeweb) @_felipeweb (http://twitter.com/_felipeweb)