TDC2018SP | Trilha Kotlin - Kodando com Kotlin aplicacoes front-end.

1. Globalcode – Open4education
Trilha – Kotlin
Daniel Ferreira Monteiro Alves
Especialista em Desenvolvimento de Sistemas – Daitan Group
danfma@gmail.com, dalves@daitangroup.com, dalves@vmware.com
https://github.com/danfma
https://linkedin.com/in/danfma

2. Globalcode – Open4education
Kodando com Kotlin aplicações front-end

3. Globalcode – Open4education
Agenda
Introdução
JavaScript
Kotlin2JS
Desenvolvimento front-end
Kodando
Show me the code!

4. Globalcode – Open4education
WebAssembly
Kotlin
Linguagem criada pela JetBrains
“Linguagem de programação tipada estaticamente para aplicações
multi-plataformas modernas”.
Segunda linguagem mais amada dentre os desenvolvedores,
segundo o Survey de 2018 da StackOverflow.
Web Assembly

5. Kotlin

6. Globalcode – Open4education
JavaScript
Linguagem dinâmica baseada em protótipos,
padrão dos Navegadores;
Ganhou ainda mais importância com o HTML5;
Possui inúmeras bibliotecas e frameworks disponíveis.
Fonte: https://medium.com/samsung-internet-dev/think-you-know-the-top-web-browsers-458a0a070175

7. Globalcode – Open4education
JavaScript
The browser king
Leão de Sushant Pradhan (CC0 Creative Commons)

8. Globalcode – Open4education
JavaScript
Então, pra que outra linguagem?
Bom, como Frederick Brooks disse, “não existe bala de
prata”...
A linguagem evoluiu e vai continuar a evoluir, mas
alguns desenvolvedores podem sentir falta de um ou
outro recurso já presente em outras linguagens.

9. Globalcode – Open4education
JavaScript
E... a linguagem tem uns “recursos” bem
estranhos:
[] + [] => “”
Array(3) == “,,” => true
var x = [1];
x == x => true
x == !x => true
NaN == NaN => false
Fonte: https://charlieharvey.org.uk/page/javascript_the_weird_parts

10. Globalcode – Open4education
ELM
Fable (F#)
Bridge (C#)
Jsweet (Java)
...
Kotlin2JS (Kotlin).
JavaScript, se não quero...
Tenho “Transpilers”!
CoffeeScript
Babel
TypeScript
PureScript
LiveScript
Dart

11. Globalcode – Open4education
Kotlin
Como linguagem de programação para navegadores

12. Globalcode – Open4education
Kotlin2JS
Gera JavaScript compatível com ECMAScript 5.1;
Interoperabilidade com módulos JavaScript;
Mesma funcionalidade da biblioteca padrão, seja
almejando JS ou a JVM.

13. Globalcode – Open4education
Kotlin2JS
Se Kotlin transpila para JavaScript, então um
programa escrito em Kotlin pode rodar onde um
programa escrito em JavaScript roda, certo?

14. Globalcode – Open4education
Mas, precisamos de umas
“coisitas” a mais...
Fonte:
https://www.reddit.com/r/ProgrammerHumor/comments/7zfgwg/frontend_vs_backend/

15. Globalcode – Open4education
Frameworks / Bibliotecas?
Temos várias opções, mas podemos
usar todas com Kotlin?

16. Globalcode – Open4education
Kodando

17. Globalcode – Open4education
Kodando
Conjunto de bindings criados para permitir utilizar
bibliotecas JavaScript existentes, com Kotlin
Começou como um projeto pessoal;
Evoluiu para uma primeira versão em React;
Uma segunda versão de React;
E depois, RxJs, Mithril, Jest, React Router DOM e uns
utilitários.

18. Globalcode – Open4education
Kodando
Onde eu acho?
https://bintray.com/danfma/kotlin-kodando
Bindings:
Mobx / Mobx React
React / React DOM
React Router DOM
MithrilJS
Redux implementation using RxJs

19. Globalcode – Open4education
SHOW ME THE CODE!
TALK IS CHEAP

20. Globalcode – Open4education
Kotlin Bundled
Project Minified Gziped
React + Reduxing + RxJs 267KB 59.9KB
React + Mobx 212KB 65.5KB
React 143KB 38.9KB
MithrilJs 71.1KB 19.5KB
DOM + MVP 43.5KB 12.8KB
DOM 39.9KB 10.4KB

21. Globalcode – Open4education
Links
Kodando libraries
https://github.com/kodando/kodando
Kodando samples
https://github.com/kodando/kodando-samples
Código da palestra
https://github.com/danfma/tdc-2018-kotlin-kodando