Desenvolvimento de App com JS :

vantagens e desvantagens

Publicidade e propaganda - unisinos

Quem sou eu?

técnico em informática - IFSUL CAmpus Charqueadas

fullstack do petit.sparkbox.io

head de mídia na noize

freela CRz branding

Não seja hater!

o que é meteor.js?

Meteor is a full-stack JavaScript platform for developing modern web and mobile applications. Meteor includes a key set of technologies for building connected-client reactive applications, a build tool, and a curated set of packages from the Node.js and general JavaScript community.

docs.meteor.com/

Como funciona

meteor vai além de ser um framework. Como já visto, ele é uma plataforma completa de desenvolvimento que supre tanto o lado server quanto cliente.

Como funciona

Rails (ruby)

Django (python)

express (node)

Laravel (PHP)

Meteor (node)

server

React

angular backbone

ember

blaze

client

Mysql

postgresql

mongo

database

grunt

gulp

meteor

dev/ build tools

Dados na rede, always bet on js, banco de dados ~everywhere~, reatividade, update automático em todas as camadas, simplicidade = produtividade

Princípios

não envia html, envia dados e deixa com que o client renderize esses dados.

Princípios

Dados na rede, always bet on js, banco de dados ~everywhere~, reatividade, update automático em todas as camadas, simplicidade = produtividade

Princípios

utiliza a mesma linguagem para desenvolver aplicações de servidor, web browsers e dispositivos móveis.

Princípios

Dados na rede, always bet on js, banco de dados ~everywhere~, reatividade, update automático em todas as camadas, simplicidade = produtividade

Princípios

o banco de dados pode ser acessado, pelos mesmos meios, tanto do lado client quanto server. Isso faz com que não seja necessário fazer requisições https desnecessárias.

Dados na rede, always bet on js, banco de dados ~everywhere~, reatividade, update automático em todas as camadas, simplicidade = produtividade

Princípios

meteor oferece reatividade de pilha completa, o que permite com que sua ui sempre reflita o state of the world com um esforço mínimo de desenvolvimento.

Princípios

Dados na rede, always bet on js, banco de dados ~everywhere~, reatividade, update automático em todas as camadas, simplicidade = produtividade

Princípios

tudo é real time com meteor, desde o banco de dados até os templates/interfaces

Princípios

Dados na rede, always bet on js, banco de dados ~everywhere~, reatividade, update automático em todas as camadas, simplicidade = produtividade

Princípios

uma api limpa, com códigos e camadas simples que, consequentemente aumenta a produtividade

Princípios

um pouco de código para adoçar a vida

meteor create petit

client/main.js        # a JavaScript entry point loaded on the client
client/main.html      # an HTML file that defines view templates
client/main.css       # a CSS file to define your app's styles
imports/api           # API files
imports/startup       # Startup files
imports/ui            # UI files
server/main.js        # a JavaScript entry point loaded on the server
package.json          # a control file for installing NPM packages
.meteor               # internal Meteor files
.gitignore            # a control file for git

cd petit
meteor

um pouco de código para adoçar a vida

import { Meteor } from 'meteor/meteor';
import '../imports/api/pets.js';
import '../imports/api/vaccine.js';

Meteor.startup(() => {
  // code to run on server at startup
});

server/main.js

um pouco de código para adoçar a vida

import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
 
import '../imports/startup/accounts-config.js';

import '../imports/startup/client/routes';

client/main.js

um pouco de código para adoçar a vida

import { Account } from 'meteor/accounts-base';

Accounts.ui.config({
    passwordSignupFields: 'USERNAME_ONLY',
});

imports/startup/Accounts-config.js

meteor add accounts-ui accounts-password

um pouco de código para adoçar a vida

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Template } from 'meteor/templating';
import { Blaze } from 'meteor/blaze';

export default class AccountsUIWrapper extends  Component{
    componentDidMount(){
        this.view = Blaze.render(Template.loginButtons,
        ReactDOM.findDOMNode(this.refs.container));
    }
    componentWillUnmount(){
        Blaze.remove(this.view);
    }
    render(){
        return <span ref="container" />;
    }
}

imports/ui/accountsuiwrapper.jsx

um pouco de código para adoçar a vida

export default class App extends Component{
    render(){
        <AccountsUIWrapper />
    }
}

imports/ui/app.jsx

vantagens

agilidade e facilidade para desenvolver/lançar pordutos mínimos

mesma linguagem para desenvolver em diferentes devices/plataformas

além dos seus próprios pacotes, disponíveis no atmosphere, também é possível utilizar pacotes da npm

baixo custo de desenvolvimento

excelente documentação e tutorial

desvantagens

rejeição das lojas de aplicativos

performance pode não ser tão boa

é preciso ter um know how um pouco maior para que o desenvolvimento não se torne muito engessado

as vezes não sabe se o bug está no frontend ou no backend

quem usa