Página 10 de 16

HTML e Javascript: trocando dois elementos de posição (swap)

Tecnologias Web Deixe um comentário

Você tem dois elementos quaisquer na estrutura do documento da sua página (DOM). Como invertê-los, isto é, colocar um no lugar do outro?

Abordagens para solução

O problema não é tão simples quanto pode parecer a princípio, pois ao movermos um dos elementos, perdemos sua posição original e não é tão fácil armazenar a localização de um elemento em Javascript.

Vamos analisar algumas abordagens nos tópicos abaixo.

Variável auxiliar

Podemos usar o princípio básico da troca de valores entre variáveis. Por exemplo, dadas as variáveis A e B, podemos trocar os valores usando uma variável auxiliar AUX:

AUX = A
A = B
B = AUX

Simples, não? Mas estamos aqui falando da posição de elementos na estrutura HTML. O que seria nossa variável auxiliar? A resposta é: um elemento criado dinamicamente.

Colocando isso numa solução reutilizável em forma de um plugin para jQuery:

(function ($) {
    $.fn.swap = function(anotherElement) {
        var a = $(this).get(0);
        var b = $(anotherElement).get(0);
        var swap = document.createElement('span');
        a.parentNode.insertBefore(swap, a);
        b.parentNode.insertBefore(a, b);
        swap.parentNode.insertBefore(b, swap);
        swap.remove();
    }
}(jQuery));

Demo no jsfiddle

A utilização é muito simples:

$(seletorElemento).swap(seletorOutroElemento);

Puff! Os elementos foram trocados.

Armazenando a posição do elemento

Outra abordagem, que não envolve a criação de um elemento adicional, é armazenar a posição de pelo menos um dos elementos. Na verdade, só precisamos armazenar a posição do elemento que será movido primeiro.

O problema está em como representar a posição de um elemento, pois a sua inserção será feita relativamente a algum outro. Se usarmos o anterior como referência, teremos problemas se ele for o primeiro. Se usarmos o posterior, teremos problemas se ele for o último. Pior, os dois elementos a serem trocados podem estar próximos um do outro, em sequência!

Não vou descrever minuciosamente as nuances do algoritmo que desenvolvi porque não creio ser interessante, mas considere a seguinte implementação:

(function ($) {

    $.fn.swap = function(anotherElement) {

        var sameParentStrategy = function(one, another) {
            var oneIndex = one.index();
            var anotherIndex = another.index();
            var swapFunction = function(first, second, firstIndex, secondIndex) {
                if (firstIndex == secondIndex - 1) {
                    first.insertAfter(second);
                } else {
                    var secondPrevious = second.prev();
                    second.insertAfter(first);
                    first.insertAfter(secondPrevious);
                }
            }
            if (oneIndex < anotherIndex) {
                swapFunction(one, another, oneIndex, anotherIndex);
            } else {
                swapFunction(another, one, anotherIndex, oneIndex);
            }
        };

        var differentParentsStrategy = function(one, another) {
            var positionStrategy = function(e) {
                var previous = e.prev();
                var next = e.next();
                var parent = e.parent();
                if (previous.length > 0) {
                    return function(e) {
                        e.insertAfter(previous);
                    };
                } else if (next.length > 0) {
                    return function(e) {
                        e.insertBefore(next);
                    };
                } else {
                    return function(e) {
                        parent.append(e);
                    };
                }
            }
            var oneStrategy = positionStrategy(one);
            var anotherStrategy = positionStrategy(another);
            oneStrategy(another);
            anotherStrategy(one);
            return this;
        };

        //check better strategy
        var one = $(this);
        var another = $(anotherElement);
        if (one.parent().get(0) == another.parent().get(0)) {
            sameParentStrategy(one, another);
        } else {
            differentParentsStrategy(one, another);
        }

    };

}(jQuery));

Note as diferentes estratégias de troca, dependendo dos elementos serem ou não filhos de um mesmo “pai”.

Demo no jsfiddle.

Clonagem dos elementos

Uma terceira alternativa, um tanto simplista na verdade, é clonar os dois elementos e substituir os originais um pelo outro. Vejamos o código:

(function ($) {
    $.fn.swap = function(anotherElement) {
        // cache elements
        var $div1 = $(this),
            $div2 = $(anotherElement);
        // clone elements and their contents
        var $div1Clone = $div1.clone(),
            $div2Clone = $div2.clone();
        // switch places
        $div1.replaceWith($div2Clone);
        $div2.replaceWith($div1Clone);
    }
}(jQuery));

Análise das soluções

Cada abordagem parece ter seu ponto fraco. Criar um elemento auxiliar deixa qualquer um com um pé atrás por causa da criação e inserção de um elemento “inútil” ao DOM. Porém, a complexidade do algoritmo que calcula a posição dos elementos e as várias funções usadas da API do jQuery chega a dar calafrios na espinha. E quanto a clonar os elementos? Isso não pode ser algo do bem!

Note que a primeira abordagem, por ser simples e direta, pode facilmente ser implementada sem usar a API do jQuery. Usei propositalmente a API nativa do Javascript para gerar um ganho de desempenho, pois, como veremos a seguir, isso faz muita diferença. Já as demais abordagens exigiriam alterações nada triviais para depender apenas da API nativa.

Ao invés conjecturar, vamos logo ao teste de desempenho. Preparei oito cenários com os algoritmos de troca descritos acima. Para cada algoritmo, o desempenho para troca de nós que estão no mesmo nível e o desempenho para troca de nós que estão em locais diferentes do HTML foram medidos separadamente. Além disso, o algoritmo que usa a “variável auxiliar” foi desmembrado em dois: o primeiro usando a API do jQuery e o segundo, como descrito no respectivo tópico, usando a API nativa.

Considere o seguinte gráfico:

Desempenho de algoritmos de swap

A legenda para relacionar cor e algoritmo:

  • Azul escuro: nós no mesmo nível armazenando a posição do elemento.
  • Vermelho: nós em níveis diferentes armazenando a posição do elemento.
  • Amarelo: nós no mesmo nível com variável auxiliar e a API do jQuery.
  • Verde escuro: nós em níveis diferentes com variável auxiliar e a API do jQuery.
  • Roxo: nós no mesmo nível com variável auxiliar e API nativa, sem jQuery.
  • Azul claro: nós em níveis diferentes com variável auxiliar e API nativa, sem jQuery.
  • Pink: nós no mesmo nível usando clonagem.
  • Verde claro: nós de níveis diferentes usando clonagem.

Teste no jsperf

Conclusões

Os resultados confirmaram algumas das suspeitas:

  • A clonagem é muito lenta.
  • Usando a API do jQuery, armazenar o local da variável é mais rápido do que criar e inserir um elemento auxiliar.
  • Porém, usar a API nativa do Javascript gerou um ganho em torno de 10x no desempenho. Mesmo com a alteração no DOM gerada pera inserção da variável auxiliar, o desempenho desta solução superou todas as demais.

Não pretendo aqui tirar nenhum mérito de uma excelente biblioteca como o jQuery, pois em muitos casos ela nos permite obter um desempenho muito superior a uma “solução caseira”. Porém, não devemos tomar qualquer biblioteca por uma solução definitiva para todos os problemas.

Muitos cenários exigirão código específico e usar uma API nativa, de modo a remover camadas de abstração, muitas vezes é o melhor caminho.

Nós, desenvolvedores, devemos ser flexíveis o suficiente para trabalhar em diferentes níveis de abstração. Devemos saber quando “baixar” o nível… 😉

Este artigo foi baseado na minha resposta no StackOverflow em Português e nas respostas de outros excelentes desenvolvedores como Marcelo Gibson e Zuul!

Results of a social experiment

Career Deixe um comentário

ExperimentingGeneWilder

After a few years working on IT, always learning new things, I think I came to a point where I have a reasonable experience. However, I noticed that talent and effort aren’t equivalent to professional growth and recognition.

My influence as professional were only over my small circle of colleagues, inside my company. For the rest of the world, I was just nobody.

No, it’s not about fame I’m talking about, but in showing who really I am. If someone put my name on Google today, what he/she will see? An unknown? Or a professional respected by what he does, knows and is?

At the beginning of 2013 I decided to start a personal and social experiment, taking the heat for exposing myself.

The scenario

In the first 5 years working with IT there weren’t one day when I haven’t studied or created something different, even if it was one simple pattern applied to one simple class. But even then I often felt kind of stagnated.

On the other hand, sometimes there was a “wave of maturity”, when I felt a sort of adrenaline rush realizing I was improving a lot and fast. But, as the time passes, the growth stops and soon the stagnation shows up again. In order to start it again it was necessary to reinvent myself time after time.

Despite of it, though I was distinguished inside my small circle, I was nobody for the IT community. There wasn’t anyone outside my company who knew my reputation, nothing online that proved something about me.

How to overcome that?

Analyzing previous improvements

One of the major “waves of maturity” occurred to me while I was writing a paper about software estimation at my post graduation (specialization) course. My advisor professor was Dr. Ítalo Vega. In each analysis of my text, he explained concepts far beyond what I had learned in college or reading books. I learned so much about how critical thinking works and about the difference between objective versus subjective arguments. I can say my entire worldview was affected, the way I thought about facts, evidences, and opinions.

What happened there? What started that evolution? I could comprehend the following main points:

  • Exposition of my work to analysis and critic of a good professional.
  • Work together with someone who knows (a lot) more than I.

How could I reproduce that experience?

The first action: this blog

With my mind blowing with new ideas and a new vision of IT acquired from my specialization, my first act was to start this blog.

I had a double intent: help less experienced professionals and disseminate a few things I had learned. This way, if one wants to know who Luiz Ricardo is, he just would need to spend a bit of time reading through this page to have a good idea about my profile, experience, depth. I can say these goals was and are being achieved.

But there’s a problem with the blog (as any website): isn’t not enough to publish content online. I had to interact with good professionals, so I decided to join…

Online developer communities

Knowing about communities like GUJ (Grupo de Usuários Java, Java User Group) and StackOverflow, I bet it would be an interesting way to asset my knowledge. Could I help other professionals as I did with my colleagues? Or did my knowledge is restricted to my small workplace?

GUJ Respostas (GUJ Answers)

My first “target” was GUJ Respostas, a platform like StackOverflow, different from traditional forums. Users ask questions and others answer them. Users can vote for or against questions and answers. Clarifications can be made via comments. For each vote received, the user that asked a good question or gave a good answer earns a few reputation points. Votes against questions or answers subtract points from the user.

As I started answering questions, I had a few snags. When we deal with someone personally we can hear the problem and ask or check whatever we want. At distance, it’s necessary to pay attention to details, suppose correctly, and realize that if we write nonsense someone will be there to point this out. It’s a good training to the Chrystal Ball all good software engineers must own.

I joined GUJ Respostas in October, 2013. Three months later I reached the first position in the rank.

StackOverflow em Português (StackOverflow in Portuguese)

Some time later, on December 13, 2013, the Portuguese speaking community version of StackOverflow began. I joined since the first day of private beta!

StackOverflow is a community with goals like organizing and centralizing information about programming and related issues, though there are other interesting communities sharing the same ideal on StackExchange network. StackOverflow is more demanding about the content, moderators act boldly to maintain the level of quality.

I don’t need to say that I had some issues in the beginning. But, once more, exposing myself to other professionals I was susceptible of analysis and critics.

In the end, the results were also very positive. After three months of active participation I reached the first position in the rank.

Review of the experiment

Obviously, reaching the first place on both sites doesn’t prove at all I’m better than any other user. This isn’t also an objective qualifier of my skills.

However, at least I can say as a professional I was useful to many people, I have a fairly wide and deep knowledge, enough to help in different areas. 😉

I also won confidence before interviews and discussions about technology in general.

Furthermore, many times I was criticized. With good reason in some occasions, not so much in others. Sometimes other professionals answered better. Little by little, I compared my approach with theirs and improved my reasoning and thought process.

I don’t know for how long I’ll be in the first position on these sites. Indeed, it doesn’t matter. Perhaps I’ll spend my time in other activities to get better in different aspects. But it certainly was a great experience!

Conclusions for the reader

I believe those principles mentioned above count for every professional, namely:

  • Expose yourself to analysis and critic.
  • Learn/work with better people.

Leave your comfort zone

Maybe you are the best in your group. But, probably, you are the best only in the stuff you are better. And what about the areas where others are better than you? Probably you have something to learn, isn’t?

There’s always someone better. It’s a basic principle.

Be social

Even good professionals can get out-of-date and alienated. Make sure you have contact with different IT subcultures and increase your contact list. This can bring many benefits to your career, and I’ll list two of them:

  1. Learn how to express your thoughts better and defend your ideas. This can contribute to get a promotion.
  2. Be aware of the news in technical and market issues. This will keep you above the average and could even help you go get a better job.

Is it worth repeating my experiment?

It depends.

Participating in developer communities is a valid way to help remote colleagues and gather knowledge outside your daily environment.

However, I don’t recommend invest too much time or impose on yourself to reach a specific position in the rank.

There are other ways to improve yourself professionally. This is only one of them. Maybe, in your case, it would be better read those dusty books on your shelf, make a specialization course, or participate in open source projects, where your code will be assessed by more experienced developers.

The important thing is: always reinvent yourself and don’t stand still!

Resultados de um experimento social

Carreira 6 Comentários

ExperimentingGeneWilder

Após alguns anos trabalhando com TI, sempre me atualizando a aprendendo coisas novas, acredito ter juntado uma boa bagagem profissional. Porém, notei que talento e esforço não são sinônimos de reconhecimento e crescimento profissional.

Minha influência como profissional atingia apenas meu círculo mais próximo. Para o restante do mundo, eu era apenas um pobre desconhecido.

Não, não é de fama que estou falando e sim sobre como mostrar quem realmente você é. Se alguém colocar meu nome no Google, o que ela vê? Um nada? Um desconhecido? Ou alguém que é respeitado por aquilo que faz, sabe e é?

No início de 2013 decidi começar um experimento pessoal e social, isto é, dar minha “cara a tapa” mesmo!

Explicando melhor o cenário

Em meus primeiros 5 anos trabalhando foi raro um dia em que não estudei alguma coisa nova ou criei algo diferente, ainda que seja o simples prazer de aplicar um pattern simples numa classe simples. Mesmo assim às vezes me sentia estagnado.

Em determinados períodos, houve uma “onda de amadurecimento”, aquela adrenalina de sentir que realmente estava progredindo. Mas, com o tempo, o crescimento desacelera e logo a estagnação aparece novamente. Para continuar crescendo e amadurecendo era então necessário reinventar-se para audaciosamente ir onde nenhum nerd jamais esteve (não entendeu?).

Além disso, embora de certa forma eu tenha me destacado no meu restrito círculo profissional, eu não era “ninguém” para a comunidade de TI. Não havia nada além de colegas imediatos que pudessem dar um aval da minha reputação, nada online que provasse algo sobre mim.

Como superar isso?

Analisando progressos anteriores

Uma das maiores “ondas” de amadurecimento ocorreu no desenvolvimento da minha monografia sobre “Estimação de Software” na PUC-SP. Fui orientado por, nada mais, nada menos que o Dr. Ítalo Vega. A cada análise do meu texto, ele parava e me explicava conceitos muito além do que eu já havia aprendido em qualquer lugar. Aprendi muito sobre como funciona uma mente crítica em relação a argumentos objetivos e subjetivos. Posso dizer que toda minha visão de mundo foi afetada, meu modo de pensar e discutir sobre fatos, evidências e opiniões.

Em linhas gerais, o que aconteceu ali? O que deu início a tal evolução? Pude compreender os seguintes pontos:

  • Exposição do trabalho à análise e crítica de um bom profissional
  • Trabalho em conjunto com quem sabe (muito) mais do que eu

Como repetir essa experiência?

A primeira atitude: este blog

Com a mente borbulhando por ideias e a nova visão sobre TI adquirida na pós-graduação, minha primeira atividade foi começar este blog.

A ideia é dupla: tentar ajudar profissionais mais novos e expor algum conhecimento em forma de texto. Com isso, quem deseja saber quem é o profissional Luiz Ricardo precisa apenas gastar alguns momentos de leitura para identificar meu perfil, minha maturidade, minha profundidade. Nesses quesitos, posso dizer que o objetivo foi (e continua sendo) alcançado.

O problema com o blog (e qualquer site) é que não adianta nada apenas colocar o domínio no ar e postar algum conteúdo. A interação com outros bons profissionais não vem automaticamente. Decidi ir além, a procura de…

Comunidades de desenvolvedores

Sabendo da existência de comunidades como GUJ (Grupo de Usuários Java) e StackOverflow, apostei que seria uma forma interessante de colocar meu conhecimento à prova. Será que eu poderia ajudar aleatoriamente outros profissionais, assim como ajudava meus colegas da empresa? Ou seria meu conhecimento restrito ao meu pequeno ambiente de trabalho?

GUJ Respostas

Meu primeiro “alvo” foi o GUJ Respostas, um sistema parecido com o StackOverflow e diferente de um fórum tradicional. Nesse sistema, usuários criam perguntas e os demais publicam as respostas. Os usuários podem votar contra ou a favor nas perguntas e respostas. Esclarecimentos são feitos através de comentários. A cada voto recebido o usuário que fez uma boa pergunta ou resposta ganha certa quantidade de pontos. Votos contra debitam pontos do usuário.

Ao começar respondendo perguntas, tive alguns percalços. Quando lidamos com alguém pessoalmente podemos escutá-la relatar seu problema e perguntar o que quisermos. Tratando à distância, é preciso atentar-se aos detalhes, pressupor corretamente e saber que se falarmos besteira vai ter alguém lá para apontar isso. É um bom treino para a bola de cristal que todo bom engenheiro de software deve ter.

Fiz o cadastro no GUJ Respostas em Outubro de 2013. Três meses depois atingi a primeira colocação no ranking.

StackOverflow em Português

Algum tempo depois, em 13 de dezembro de 2013, deu-se início à comunidade de língua portuguesa do StackOverflow. Aderi desde o primeiro dia do beta privado!

Para quem não sabe, StackOverflow é uma comunidade que pretende organizar e centralizar informação sobre programação e assuntos correlatos, muito embora, haja muitas outras comunidades interessantes que compartilham do mesmo ideal no StackExchange. A comunidade do StackOverflow costuma ser bem mais exigente quanto ao conteúdo de perguntas e respostas publicadas e os moderadores agem fortemente no intuito de garantir a qualidade do site.

Bem, não sei se preciso dizer que tive alguns trancos no começo. Mais uma vez, ao me expor para outros profissionais, fui passível de análise e críticas.

No fim, os resultados também foram positivos. Após 3 meses participando ativamente atingi novamente o primeiro lugar no ranking.

Análise da experiência social

Obviamente, atingir o primeiro lugar em pontuação nos dois sites não prova de forma alguma que eu sei mais do que todos os que estão lá. Também não é, em si mesmo, um qualificador objetivo de minhas competências.

Porém, pelo menos posso dizer que sou útil como profissional para várias pessoas e que meu conhecimento é abrangente o suficiente para ajudar em muitas áreas diferentes. 😉

Ganho também em confiança diante de possíveis entrevistas e discussões sobre tecnologia em geral.

Além disso, muitas vezes fui criticado. Algumas com razão, outras não. Em determinadas ocasiões outras pessoas deram respostas melhores que as minhas. Aos poucos, comparei minha abordagem frente aos problemas com a de outras pessoas e pude aprimorar meu raciocínio, minha forma de pensar e agir.

Não sei por quanto tempo vou continuar em primeiro lugar nos sites. Na verdade, isso nem importa tanto. Talvez eu passe a dedicar esse tempo a outras atividades para continuar avançando como profissional. Mas foi uma ótima experiência!

Conclusões para o leitor

Creio que os princípios expostos acima valem também para todo profissional, a saber:

  • Expor-se à análise e crítica
  • Aprender/trabalhar com pessoas melhores

Saia da sua zona de conforto

Talvez você seja o melhor no seu grupo. Mas, provavelmente, você é melhor somente naquilo que você é melhor. E quanto às áreas onde os outros são melhores? Provavelmente você tem algo a aprender.

Além disso, sempre há alguém melhor. É um princípio básico.

Seja social

Mesmo bons profissionais ficam defasados e alienados ao se fecharem dentro de si mesmos. Tenha contato com diferentes subculturas de TI e aumente o quanto puder o seu leque de contatos. Isso pode trazer vários benefícios para sua carreira, dos quais vou citar dois:

  1. Aprender a expor melhor seus pensamentos e defender suas ideias, o que pode contribuir para promoções.
  2. Estar por dentro das novidades em termos técnicos e também sobre o mercado, o que vai mantê-lo acima da média e pode até ajudar a conseguir um bom emprego.

Vale a pena repetir meu experimento?

Depende.

Participar de comunidades é um meio válido para ajudar colegas distantes e agregar conhecimento de fora do seu ambiente cotidiano.

Entretanto, não recomendo investir tempo demais nisso, muito menos ter como objetivo uma posição específica no ranking.

Existem outras formas de se aperfeiçoar profissionalmente. Esta é apenas uma delas. Talvez, no seu caso, seja melhor tirar o pó daqueles pobres livros abandonados (ou comprar novos). Ou, quem sabe, matricular-se num curso de extensão ou especialização. Outra possibilidade é participar de projetos de código-aberto, onde seu código será avaliado por desenvolvedores mais experientes.

O importante é reinventar-se sempre e não ficar parado!

O que são e como funcionam transações em SQL?

Banco de Dados Deixe um comentário

Bancos de dados relacionais que operam no padrão SQL em geral são transacionais, isto é, eles permitem a execução de uma sequência de operações como um bloco indivisível de forma a garantir a integridade dos dados em um ambiente com acesso concorrente.

O Problema

Imagine três operações sequenciais que afetam a base de dados e não usamos uma transação para controlá-las. Vamos usar como exemplo um caso de uso comum de um e-commerce:

  1. Verificar se possui o produto em estoque
  2. Inserir um novo registro da compra
  3. Debitar o estoque

Agora vamos supor que dois clientes estão tentando finalizar suas compras neste e-commerce fictício. O servidor recebe duas requisições quase simultaneamente e começa a processar os pedidos na sequência apresentada acima. Os dois pedidos estão sendo processados paralelamente em threads diferentes. Tanto o cliente A quanto o cliente B selecionaram um produto com apenas uma unidade em estoque.

Podemos acabar com a seguinte linha de execução:

  1. Thread A verifica o estoque (passo #1) e insere o registro da compra (passo #2)
  2. thread A é bloqueada e B passa a ser executada
  3. Thread B verifica o estoque (passo #1), o qual ainda não foi debitado, e insere o registro da compra (passo #2)
  4. Thread B atualiza o estoque (passo #3), que agora fica zerado
  5. Thread B é bloqueada e A passa a ser executada
  6. Thread A atualiza o estoque (passo #3), que agora fica negativo!

Apesar de verificarmos o estoque a ordem de execução dos diferentes processos é imprevisível, então neste cenário concorrente ela não traz garantia do valor no passo seguinte.

A Solução

Bancos de dados transacionais usam o conceito ACID:

  • Atomicidade: uma transação é uma sequência de operações indivisível, ou é executado como um todo, ou tudo é desfeito.
  • Consistência: ao final da transação, o estado dos dados deve ser consistente.
  • Isolamento: embora alguns sistemas permitam quebrar o isolamento, em geral, uma transação em andamento não pode ser acessada por outras transações de modo a evitar leitura de um estado inconsistente, uma “sujeira”.
  • Durabilidade: em caso de sucesso (commit) a persistência dos dados deve ser garantida

Para garantir esses conceitos, em geral, os bancos de dados usam bloqueios quando ocorrem acessos simultâneos à mesma estrutura de dados. Ou seja, se alguém já está mexendo nos dados, os demais tem que aguardar sua vez numa fila até ele acabar.

Na prática

Ao usar bancos de dados transacionais, nós podemos usufruir deste controle de gerenciamento por parte dos SGBDRs (Sistemas Gerenciadores de Bancos de Dados Relacionais).

Incluindo o conceito de transação ACID no exemplo anterior, vamos ver como fica a execução:

  1. Thread A inicia uma transação, verifica o estoque (passo #1) e insere o registro da compra (passo #2)
  2. Thread A é bloqueada e B passa a ser executada
  3. Thread B inicia uma transação, mas ao tentar verificar o estoque ela é bloqueada porque a transação de A ainda não acabou
  4. Thread A atualiza o estoque, que agora fica zerado, e faz commit na transação.
  5. Thread B é desbloqueada e passa a ser executada
  6. Thread B conclui a verificação do estoque (passo #1) e retorna um erro pois não encontra o produto disponível no estoque
  7. Thread B executa um rollback para desfazer outras alterações que tenha efetuado, por exemplo, se houve outro produto debitado na mesma transação.

O resultado final é como se somente a thread A tivesse executado e B nunca existisse.

Nem tudo é um mar de rosas

Existem alguns problemas inerentes a transações ACID, sendo o desempenho o maior deles.

Embora seja importante garantir a integridade dos dados, para muitos sistemas onde a disponibilidade é o fator mais crítico um modelo que bloqueia acessos simultâneos torna-se inviável. Este é um dos principais fatores para o surgimento e a adoção de diversos sistemas de bancos de dados não transacionais e NoSQL.

O importante é entender que o uso de transações tem um custo e em algumas ocasiões este pode ser alto demais. Uma das representações mais comuns do trade-off de persistência de dados é a seguinte (retirada deste artigo):

tradeoff-database

O gráfico demonstra que consistência, disponibilidade e particionamento (escalar o banco de dados em diversos nós) são recursos que afetam uns aos outros. Você simplesmente não pode ter o melhor dos três e isso foi provado no teorema de CAP.

Bancos de dados relacionais geralmente sacrificam o particionamento em prol da consistência e da disponibilidade, enquanto alguns sistemas NoSQL sacrificam a consistência dos dados.

Note que o termo “geralmente” ou “em geral” foi cuidadosamente utilizado no artigo porque os diferentes sistemas de bancos de dados permitem vários níveis de configuração de isolamento de transações e acesso simultâneo, possibilitando um ajuste fino do desempenho de cada funcionalidade

Este artigo foi baseado na minha resposta no StackOverflow em Português!

Como desabilitar campos em sistemas web

Tecnologias Web Deixe um comentário

Quando lidamos com sistemas web, é frequente a necessidade de desabilitarmos algum campo na página, com a finalidade de impedir a alteração por parte do usuário.

O problema é que o navegador não envia campos desabilitados com disabled na submissão do formulário. Esta característica comumente deixa os novatos atordoados.

Solução: readonly

Uma solução é usarmos o atributo readonly, porém existem efeitos colaterais:

  • Se for um campo de texto, o usuário poderá selecionar e copiar o conteúdo, o que pode ser uma vantagem em alguns casos.
  • Além disso, os estilos do campo permanecerão os originais, isto é, o usuário poderá não perceber que se trata de um campo somente-leitura.

Para contornar o segundo ponto e dar feedback visual para o usuário, adicione um estilo para manter a usabilidade, por exemplo, deixando o fundo da caixa um pouco acinzentado.

Exemplo com CSS inline:

<input type="text" value="Valor fixo" 
    style="background: #EEE; cursor: not-allowed; color: #777"
    readonly />

Exemplo com uma classe CSS:

.desabilitado {
    background: #EEE; 
    cursor: not-allowed; 
    color: #777;
}


<input type="text" value="Valor fixo 2" class="desabilitado" readonly />

Veja o exemplo funcional do código acima no jsfiddle.

Considerações de segurança

Alguém pode argumentar que desabilitar campos na tela não é uma boa prática do ponto de vista de Segurança da Informação, pois hoje um usuário pode facilmente burlar essa limitação através da Ferramenta do Desenvolvedor (F12), alterando as propriedades do campo. Isso está correto, em parte.

O importante é entender que a necessidade de desabilitar campos é parte essencial do funcionamento dos sistemas. Não é seu objetivo garantir a segurança da informação daquele campo.

Este artigo tem por objetivo auxiliar o desenvolvedor front-end com um elemento puramente visual e não isenta as validações necessárias no back-end.

Entendido!?

Este artigo foi baseado na minha resposta no StackOverflow em Português!

Running Python (or any language) in your browser

Web Technologies 3 Comentários

browsers-war-java-script-engines

Some time ago a very interesting question arose in StackOverflow in Portuguese about running an arbitrary programming language in the browser, just like Javascript does.

How could we run our own language in a wesob page? Let’s face the challenge and implement it!

Requirements

There are two ways to include Javascript in HTML documents:

Inside a <script> tag:

<script type="text/javascript">
alert('javascript running');
</script>

From an external source:

<script type="text/javascript" src="script.js"></script>

We want to use our language in the same fashion.

Inside a <script> tag:

<script type="text/ourlanguage">
...
</script>

From an external source:

<script type="text/ourlanguage" src="our-script.abc"></script>

We won’t consider inline code, as in onclick, onchange, and other HTML tag attributes.

Keep in mind that <script> tags have certain characteristics we want to preserve;

  • They’re executed sequentially, in the order they appear in HTML.
  • If a script has the src attribute defined, it has to be downloaded and executed before the browser continues to parse the rest of the page or execute any other script. This is the reason we should only include scripts in the end of the source (close to </body>) whenever it’s possible.

Also, our new language should coexist with Javascript code in the web page, as in the example below:

<script type="text/javascript">
var a = 6;
</script>
<script type="text/ourlanguage">
print(a) # should prints 6
</script>

Working the solution

As browsers ignore script languages they don’t recognize, there is no problem if we use the <script> tag with an arbitrary type attribute. But how can we do the browser run it?

At first, I thought the only solution would be through a generic loader in javascript, which would able to load the entire page and process its content, adding all the HTML tags programmatically to the DOM and running scripts as they would be found.

It’s nothing more, nothing less, than a Javascript version of PHP or some template processor, isn’t it? It looks to complicated to be useful.

However, what I found out is that modern browsers provide an API to intercept web page changes, including those when new tags are added to the DOM during the HTML parsing. We’re talking about MutationObserver.

The possibilities are extraordinary!

Using MutationObserver

To use MutationObserver we just need to instantiate it passing a listener function to the constructor. The function will receive changes in the page as an argument. Then, we just call observe method in the instance passing the element we want to monitor. In this case, it’s the entire document.

Let’s see a basic example:

// creates the observer instance
var mutationObserver = new MutationObserver(function(mutations) {

    // iterates over the changes in the document
    mutations.forEach(function(mutation) {

        // gets all added nodes
        var addedNodes = mutation.addedNodes;

    });

});

// starts to monitor for changes in any level of the document
mutationObserver.observe(document, { childList: true, subtree: true })

Now we can check if there’s added notes of our language and then delegate the execution to its interpreter.

Choosing a language: Python

Which language to use? It should be a high-level, powerful, productive language when compared to Javascript.

Python looks like a great choice!

Building (or borrowing) an interpreter

The first step would be to build an interpreter in Javascript for our language. However, we won’t reinvent the wheel! There is implementations of the language for various platforms already. In Javascript we have a Python 3 implementation called Brython.

This project accomplishes partially our requirements about execution in <script> tags and acessing Javascript objects and variables. But Python scripts run only after the webpage is fully loaded in the the onload event from body. We want it like movie credits, that is, in the order of appearance of <script> tags, remember?

Look at the original Brython use case:

<body onload="brython({debug:0, cache:'none'})">

But, we can use MutationObserver to delegate Python scripts to Brython as they are found in the web page, offering a better integration and meeting our requirements.

Delegating the execution to Brython

Our language depends on Brython interpreter, so we need to know how to delegate scripts to it.

The bad news is that Brython don’t provide a public API to do that. The good news is that we’re dealing with an open-source project, so we can inspect the source to find out how he does its magic!

All we need is in the following excerpt:

//defines the module name as 'main' because it's in the main page
**BRYTHON**.$py_module_path['**main**'] = window.location.href;

//runs the analyzer/converter to Javascript 
var $root = **BRYTHON**.py2js($python_source, '**main**');

//gets the actual Javascript code
$javascript = $root.to_js();

Choosing the name for our scripting language: Pyscript

Our scripting language deserves a good name. As luizscript is too ugly, I decided to calculate:

Javascript – Java + Python = Pyscript

So, the tag will be like this:

<script type="text/pyscript"></script>

Adding support to Pyscript language

With all we have learned until now, let’s implement a solution using MutationObserver to add support to Pyscript in a web page.

This is the main implementation in the file pyscript.js:

//inits brython 
brython();

//creates observer instance
var mutationObserver = new MutationObserver(function(mutations) {

    //iterates over document changes
    mutations.forEach(function(mutation) {

        //gets new node
        var node = mutation.addedNodes[0];

        //is it the type we want?
        if(node && node.tagName === 'SCRIPT' && node.type === 'text/pyscript') {

            //test log
            console.log('Pyscript found!');

            //python source
            var $src;

            //If src attribute is found, do a synchronous ajax to get 
            //the code in order to execute it immediately
            if (node.src!=='') {

                if (window.XMLHttpRequest){
                    // for IE7+, Firefox, Chrome, Opera, Safari
                    var $xmlhttp = new XMLHttpRequest();
                } else {
                    // for IE6, IE5
                    var $xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                $xmlhttp.open('GET', node.src, false);
                $xmlhttp.send();
                if ($xmlhttp.readyState === 4 && $xmlhttp.status === 200) {
                    $src = $xmlhttp.responseText;
                }
                if ($src === undefined) { // houston, we have a problem!!!
                    console.log('Error loading pyscript: ' + node.src);
                    return;
                }

            } else {

                //without src, source is tag content
                $src = node.textContent || node.innerText;

            }

            //python -> javascript
            __BRYTHON__.$py_module_path['__main__'] = window.location.href;
            var $root = __BRYTHON__.py2js($src, '__main__');
            var $jssrc = $root.to_js();

            //eval in global scope
            if (window.execScript) {
               window.execScript($jssrc);
               return;
            }

            //fix for old browsers
            var fn = function() {
                window.eval.call(window, $jssrc);
            };
            fn();
        } 
    });    

});

//init observer, monitoring changes in all nodes of any level
mutationObserver.observe(document, { childList: true, subtree: true });

The code above initiates an observer (MutationObserver) for all elements that will be loaded in the webpage. If a <script> tag is found with language (type attribute) equals text/pyscript, the code will be converted by Bryton. If the tag has the src attribute, we do an Ajax synchronous call to get the source and then run it immediately.

Using in a web page

In order to use Pyscript language in any web page, we need to include both Brython and our MutationObserver implementation, in this order, in the beginning of the HTML code.

See this example:

<html> 
<head> 
<script type="text/javascript" src="brython.js"></script> 
<script type="text/javascript" src="pyscript.js"></script>

And – voilà – we have our own language running in a web page! 😀

A practical example

<!DOCTYPE html>  
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Pyscript Test Page</title>

<!-- init brython and pyscript --> 
<script type="text/javascript" src="brython.js"></script> 
<script type="text/javascript" src="pyscript.js"></script>

<!-- set javascript variable --> 
<script type="text/javascript"> 
var value = 1; 
</script>

<!-- python: print text and javascript variable --> 
<script type="text/pyscript"> 
print('Print Test!!!') 
print(value) 
</script>

</head>

<body> 
    <div id="content">Content Here</div> 
</body>

<!-- python: browser interaction --> 
<script type="text/pyscript"> 
from _browser import doc, alert

alert('Variable value: ' + str(value))

mylist = ['items', 'of', 'mylist'] 
doc['content'].text = 'Content from python: ' + ' '.join(mylist) 
</script>

<!-- python: execute external script --> 
<script type="text/pyscript" src="myscript.py"></script>

</html>

In the page above, after including the two dependencies in the beginning, there’s many script tags. I’ll explain what each one does:

  • The first one runs Javascript and sets the value variable.
  • The second runs Python and prints the value variable in the browser console.
  • The third runs Python and interacts with the browser, showing an alert box and manipulating the text of the <div id="content"> element.
  • The fourth runs Python from an external file.

The content of myscript.py file is very simple. have a look at it:

d = { '11': 'one', '22': 'two' }
for i in d: print(i, '=', d[i])

The script above creates a dictionary d (dict) and then outputs its keys and values in a for loop.

If you look back to the third script, you’ll notice the _browser library. It’s from Brython and gives us access to browser features in a simple and straightforward manner.

Notice that Brython doesn’t have all its libraries in the main script we included in the HTML. For each import it downloads the corresponding library, unless it was previously loaded in a previous import or included in a <script> tag.

Check it out

Do you want to see a working example? It’s available in my GitHub site: http://utluiz.github.io/pyscript/!

Note: do not forget to open the developer tools of your browser (F12) and check the console output!

Wanna see the source code? It’s availabel in my GitHub account: https://github.com/utluiz/utluiz.github.io!

Performance issues

At this point, good engineers should be very worried about the performance of this solution.

Well, you probably know about a lot of initiatives from bowser developers (Google, Mozilla, Microsoft) to improve Javascript performance. Today, running code in a browser is not a problem anymore. But is it enough to support something like a new language?

Obviously the conversion from Python to Javascript is very, very slow! On the other hand, Brython caches the translated code. And it gets even better. Looking Brython source code over, I found that it uses HTML5 local storage API to cache translated scripts, so the cache persists through page reloading.

“And about the runtime?”, you can ask. The final code is pure Javascript, so the browser is able to do the same optimizations it does with native Javascript code! Well, of course it doesn’t mean it’ll be as efficient as native code, after all there is a natural overhead due to instruction “adaptation” and each Python instruction can be translated into several Javascript commands.

Limitations

Brython has some limitations.

For instance, Javascript code can’t access objects and variables defined in Python. But I think it’s not a great need anyway.

Another point is about inline code as I have mentioned in the beginning. For now, we can’t do something like this:

<button onclick="python: print(1)">Button</button>

Indeed, it’s not impossible. We could manipulate the onclick attribute in our MutationObserver implementation, replacing the value by a Javascript function that delegates the execution to Brython!

Well, this article is bit long already, so I’ll assign it to the reader as homework. 😉

Anyway, you should know that is much better don’t use event attributes. It’s a good practice doing unobstructive Javascript through listener. Brython docs tell us how we can do that:

btn.bind('click', show)

Browser compatibility

According to the documentation, MutationObserver is compatible with the following browsers:

  • Google Chrome: version 26 or greater
  • Mozilla Firefox: version 14 or greater
  • Internet Explorer: version 11 or greater
  • Opera: version 15 or greater
  • Safari: version 6 or greater

As always, Internet Explorer is late. However, we’re looking to the future now. In a few years the majority of the IE users will be able to run this solutions without any problem.

Brython tell us nothing about compatibility, but in its source code I found specific implementations to IE 6 and 7. Therefore the limiting factor dwells with MutationObserver.

Final thoughts

In practice, I believe this kind of implementation is not viable for real applications. However, it was a great exercise!

What to expect in the future? Many developers are anxious to run their favorite language!

Today, we have the JVM already supporting many languages like Scala, Ruby, Python, PHP, and so forth. Perhaps, in a near future, we’ll testimony freedom to run any language in a web browser!

Executando Python (ou qualquer outra linguagem) no navegador

Tecnologias Web Deixe um comentário

browsers-war-java-script-engines

Há alguns dias surgiu uma questão muito interessante no StackOverflow em Português sobre a possibilidade de executar uma linguagem arbitrária num browser, assim como é feito hoje com o Javascript.

Como poderíamos executar a nossa própria linguagem numa página web? Vamos encarar o desafio e implementar isso na prática!

Requisitos

Temos dois métodos para incluir código Javascript numa página web.

Dentro da tag <script>:

<script type="text/javascript">
alert('código javascript executando');
</script>

De uma fonte externa:

<script type="text/javascript" src="script.js"></script>

A ideia é permitir a inclusão de nossa linguagem da mesma forma.

Dentro da tag <script>:

<script type="text/nossalinguagem">
...
</script>

De uma fonte externa:

<script type="text/nossalinguagem" src="nosso-script.abc"></script>

Não estou ainda considerando código inline, como às vezes usado em eventos onclick, onchange, etc.

No entanto, existem particularidades na execução de tags <script>:

  • Elas são executadas sequencialmente, na ordem em que aparecem no HTML.
  • Se um script é incluído com o atributo src, o mesmo deve ser baixado e executado antes do navegador continuar a exibir o restante da página ou executar outros scripts. Este é o motivo pelo qual os scripts incluídos em um site devem ficar no final da página (perto do </body>) sempre que possível.

Nossa linguagem deve co-existir com o Javascript numa página HTML, como no trecho abaixo:

<script type="text/javascript">
var a = 6;
</script>
<script type="text/nossalinguagem">
print(a) # deve mostrar 6
</script>

Análise da solução

Como o navegador por padrão ignora linguagens que ele não conhece, não há problemas em declarar tags <script> com um atributo type qualquer. Entretanto, como fazer o navegador executá-lo?

Inicialmente, havia pensado que a única solução seria criar um loader em Javascript capaz de carregar a página e processar o conteúdo, adicionando programaticamente o HTML ao DOM e executando os scripts encontrados. Isso nada mais é que do uma versão do PHP ou algum template processor em Javascript, não é mesmo?

Porém, os navegadores modernos disponibilizam uma API que permite interceptar alterações na página, incluindo a criação de tags durante o carregamento do HTML. Trata-se do MutationObserver.

As possibilidades são extraordinárias!

Usando o MutationObserver

Para usar o MutationObserver, basta instanciá-lo passando em seu construtor uma função listener, a qual receberá como parâmetro as alterações na página, e invocar o método observe informando o elemento que desejamos monitorar, neste caso, todo o documento.

Vejamos um exemplo básico:

// cria instância do observer
var mutationObserver = new MutationObserver(function(mutations) {

    // itera sobre as alterações no documento
    mutations.forEach(function(mutation) {

        // recupera nós adicionados
        var addedNodes = mutation.addedNodes;

    });

});

// inicia monitoração das alterações de nós em qualquer nível do documento
mutationObserver.observe(document, { childList: true, subtree: true })

Só resta verificar se os nós adicionados são da nossa nova linguagem e delegar a execução a um interpretador.

Definindo uma linguagem: Python

Mas qual linguagem utilizar? Deveria ser uma linguagem de alto nível e poderosa, para obter um ganho de produtividade em relação ao Javascript.

Python me parece uma boa escolha!

Construindo (ou emprestando) um interpretador

O primeiro passo seria construir um interpretador em Javascript para nossa linguagem escolhida. Porém, não vamos reinventar a roda! Há diversas implementações desta linguagem em diversas plataformas. Para Javascript temos o Brython, uma implementação do Python 3.

Este projeto já cumpre parcialmente nossos requisitos quanto à interpretação da linguagem em tags <script> e acesso aos valores do Javascript. Porém, os scripts em Python são executados somente após o carregamento de toda a página através do evento onload do body e não conforme a sequência das tags <script> como desejamos.

Veja o exemplo de uso original do Brython:

<body onload="brython({debug:0, cache:'none'})">

Então vamos usarmos o MutationObserver para delegar a execução dos scripts ao Brython assim que o script for encontrado na página, oferecendo uma integração melhor da linguagem e atendendo os requisitos propostos.

Delegando a execução ao Brython

Nossa linguagem depende do interpretador Brython, então precisamos saber como delegar a execução dos scripts para ele. A má notícia é que o Brython não disponibiliza um meio direto para isso. A boa notícia é que lidamos com um projeto open source, então nada melhor que inspecionar o fonte para descobrir como ele faz isso!

Tudo o que precisamos é do trecho:

//define o nome do módulo como 'main' por que está na página principal
**BRYTHON**.$py_module_path['**main**'] = window.location.href;

//executa o analisador/conversor para Javascript 
var $root = **BRYTHON**.py2js($python_source, '**main**');

//recupera o código Javascript 
$javascript = $root.to_js();

Definindo um nome para nossa linguagem de script: Pyscript

Nossa linguagem de script merece um nome próprio. Como luizscript é muito feio, decidi calcular a equação:

Javascript – Java + Python = Pyscript

Então, nossa tag de script será:

<script type="text/pyscript"></script>

Adicionando suporte à linguagem Pyscript

Com toda a bagagem que juntamos até aqui já podemos criar a implementação do MutationObserver para dar suporte ao Pyscript em uma página web.

Vamos criar o arquivo pyscript.js:

//init brython 
brython();

//create observer instance
var mutationObserver = new MutationObserver(function(mutations) {

    //iterate over document changes
    mutations.forEach(function(mutation) {

        //get new node
        var node = mutation.addedNodes[0];

        //is it the type we want?
        if(node && node.tagName === 'SCRIPT' && node.type === 'text/pyscript') {

            //test log
            console.log('Pyscript found!');

            //python source
            var $src;

            //If src attribute is found, do a synchronous ajax to get 
            //the code in order to execute it immediately
            if (node.src!=='') {

                if (window.XMLHttpRequest){
                    // for IE7+, Firefox, Chrome, Opera, Safari
                    var $xmlhttp = new XMLHttpRequest();
                } else {
                    // for IE6, IE5
                    var $xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                $xmlhttp.open('GET', node.src, false);
                $xmlhttp.send();
                if ($xmlhttp.readyState === 4 && $xmlhttp.status === 200) {
                    $src = $xmlhttp.responseText;
                }
                if ($src === undefined) { // houston, we have a problem!!!
                    console.log('Error loading pyscript: ' + node.src);
                    return;
                }

            } else {

                //without src, source is tag content
                $src = node.textContent || node.innerText;

            }

            //python -> javascript
            __BRYTHON__.$py_module_path['__main__'] = window.location.href;
            var $root = __BRYTHON__.py2js($src, '__main__');
            var $jssrc = $root.to_js();

            //eval in global scope
            if (window.execScript) {
               window.execScript($jssrc);
               return;
            }

            //fix for old browsers
            var fn = function() {
                window.eval.call(window, $jssrc);
            };
            fn();
        } 
    });    

});

//init observer, monitoring changes in all nodes of any level
mutationObserver.observe(document, { childList: true, subtree: true });

O código acima inicia um observador (MutationObserver) para todos os elementos da página. Se uma tag <script> for encontrada cuja linguagem (atributo type) for text/pyscript, então o código será delegado ao Brython. No caso da tag ter o atributo src, nos dizendo que o código Python está em um arquivo externo, então fazemos uma chamada Ajax síncrona para recuperar o código e executá-lo imediatamente.

Aplicando numa página web

Para a utilização da nossa linguagem Pyscript em uma página qualquer, precisamos incluir tanto o Brython quanto nossa implementação do MutationObserver, nesta ordem, logo no início do código HTML.

Vejamos o exemplo:

<html> 
<head> 
<script type="text/javascript" src="brython.js"></script> 
<script type="text/javascript" src="pyscript.js"></script>

E – voilà – temos nossa própria linguagem rodando na página!

Um exemplo prático

<!DOCTYPE html>  
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Pyscript Test Page</title>

<!-- init brython and pyscript --> 
<script type="text/javascript" src="brython.js"></script> 
<script type="text/javascript" src="pyscript.js"></script>

<!-- set javascript variable --> 
<script type="text/javascript"> 
var value = 1; 
</script>

<!-- python: print text and javascript variable --> 
<script type="text/pyscript"> 
print('Print Test!!!') 
print(value) 
</script>

</head>

<body> 
    <div id="content">Conteúdo</div> 
</body>

<!-- python: browser interaction --> 
<script type="text/pyscript"> 
from _browser import doc, alert

alert('Variable value: ' + str(value))

mylist = ['items', 'of', 'mylist'] 
doc['content'].text = 'Content from python: ' + ' '.join(mylist) 
</script>

<!-- python: execute external script --> 
<script type="text/pyscript" src="myscript.py"></script>

</html>

Nesta página, após incluir nossas dependências no início, existem várias tags de script:

  • A primeira executa Javascript que inicializa a variável value.
  • A segunda executa Python e imprime a variável value no console do navegador.
  • A terceira executa Python e interage com o navegador, exibindo uma caixa de alerta e manipulando o conteúdo (texto) do elemento <div id="content">.
  • A quarta e última executa Python a partir de um arquivo externo.

O conteúdo do arquivo myscript.py é bem simples. Vejamos:

d = { '11': 'um', '22': 'dois' }
for i in d: print(i, '=', d[i])

O script acima cria um “dicionário” d (dict) e então exibe chaves e valores de seus elementos num loop for.

Voltando um pouco ao terceiro script, note que importamos a biblioteca _browser, pertencente ao Brython. Ela nos dá uma interface para acessar as funcionalidades do navegador de forma simples e direta.

É importante observar que o Brython não contém todas as bibliotecas em seu script principal. Para cada import é feito o download da respectiva biblioteca, a não ser que a mesma já tenha sido carregada em um import anterior ou incluída numa tag <script>.

Assista ao vivo

Quer ver o exemplo funcionando? Ele está disponível no link http://utluiz.github.io/pyscript/!

Nota: não se esqueça de acessar a ferramenta do desenvolvedor (F12) para verificar o console!

Quer o código-fonte? Ele está disponível na minha conta do Github: https://github.com/utluiz/utluiz.github.io!

Algumas considerações sobre desempenho

A esta altura, um desenvolvedor mais experiente já estaria se coçando todo sobre a questão do desempenho dessa solução.

Existem iniciativas das empresas que desenvolvem navegadores (Google, Mozilla, etc.) para criar soluções que melhoram o desempenho do Javascript. Hoje, executar código no navegador não é mais um problema. Mas será que isso é suficiente para suportar algo tão profundo quanto uma nova linguagem?

Obviamente, a conversão de código Python para Javascript é muito lenta! Por outro lado, o Brython coloca o código-fonte convertido em um cache para não precisar realizar o processo novamente. Ao analisar o código-fonte do Brython me deparei com soluções de armazenamento usando a API local storage do HTML5, então mesmo se a página for recarregada a conversão não será feita novamente para o mesmo bloco de script.

Mas e quanto à execução? Se o código final executado é em Javascript, então o navegador consegue fazer as mesmas otimizações que no código nativo! Bem, mas isso não significa que será tão eficiente quanto código nativo, afinal existe um overhead natural, pois cada instrução Python pode gerar várias instruções em Javscript.

Limitações da solução

Devido a limitações do Brython, o código Javascript não consegue acessar os objetos e variáveis definidos no código Python. De qualquer forma, não consigo ver isso como uma grande necessidade.

Outra limitação é quanto a código inline mencionado no início do artigo. Por enquanto, não podemos fazer algo como no código abaixo:

<button onclick="python: print(1)">Botão</button>

Não que seja impossível. Poderíamos manipular o valor do atributo onclick dentro do MutationObserver, substituindo-o por uma função Javascript que delega a execução do código para o Brython! Bem, já está meio tarde, então deixo isso como lição de casa. 😉

De qualquer forma, essa limitação é facilmente contornada removendo o atributo onclick e adicionando um listener ao respectivo evento através de código Python, como nos é informado na própria documentação do Brython:

btn.bind('click', show)

Compatibilidade com navegadores

Segundo a documentação, o MutationObserver é compatível com o seguintes navegadores:

  • Google Chrome: versão 26 em diante
  • Mozilla Firefox: versão 14 em diante
  • Internet Explorer: versão 11 em diante
  • Opera: versão 15 em diante
  • Safari: versão 6 em diante

Como sempre, o mais “atrasadinho” é o Internet Explorer. Porém, estamos olhando para o futuro. Em alguns anos a maioria dos usuários do IE poderá executar nossa solução sem dificuldades.

A documentação do Brython não informa sobre sua compatibilidade, mas olhando o código-fonte encontrei implementações específicas para IE 6 e 7. Portanto, a limitação deve ficar mesmo com o MutationObserver.

Considerações finais

Na prática, creio ainda não ser viável aplicar esse tipo de solução em aplicações reais. Por outro lado, é um ótimo exercício!

O que podemos esperar do futuro? Muitos desenvolvedores estão ansiosos por rodar suas linguagens prediletas no navegador!

Hoje JVMs como a do Java já executam diversas linguagens como Scala, Ruby, Python, PHP e assim por diante. Quem sabe, em breve, poderemos testemunhar a ascensão da liberdade de linguagem dentro dos navegadores web!

Morando no interior, trabalhando na capital: experiências das viagens de fretado

Carreira 144 Comentários

bus_dentro Durante quase dois anos enfrentei a rotina diária de viajar de Sorocaba a São Paulo a trabalho. Gostaria de compartilhar algumas experiências com quem vive nessa situação e também com quem cogita essa possibilidade.

Como muitos que trabalham na capital, nasci e fui criado no interior, mais especificamente em Sorocaba. Também estudei no interior, na Unesp em Bauru. Entretanto, algo que não percebi até chegar ao final da faculdade, foi a diferença de salário e oportunidades entre capital e interior na área de tecnologia. Ninguém havia me alertado da dificuldade, se não da impossibilidade, que seria encontrar uma boa oportunidade de trabalho e carreira para um recém-formado em minha cidade natal.

Acabei indo trabalhar em São Paulo. Na época, já casados, minha esposa e eu entramos na mesma empresa, ambos com cargo de Programador Junior, mas cuja remuneração nos permitiu começar a vida de casal e profissional com qualidade.

A motivação da volta para o interior

Por mais de quatro anos, minha esposa e eu moramos num apartamento em São Paulo. Tínhamos alguma qualidade de vida, pois estávamos localizados ao lado do trabalho. Porém, desde o começo sentíamos alguns dos efeitos do estilo de vida da capital: barulho, poluição, falta de espaço para os animais (levamos dois gatos e tivemos que deixar um papagaio para trás), falta de sol (faz uma diferença para secar e tirar manchas de roupas, além de ser um grande prejuízo para a saúde), barulho, tendência ao sedentarismo, sem falar do barulho. Por outro lado, existem as diversas comodidades que nos eram muito atrativas, como a facilidade de encontrar o que precisávamos, o deslocamento fácil de metrô, a abundância de restaurantes, a agilidade das entregas de lojas online e dos correios (que funciona mais eficientemente na capital), etc.

A balança só começou a pender para o outro lado quando tivemos nosso primeiro filho. Quando ele tinha por volta de um ano, começamos a sentir muita falta de um quintal. Ele também sofria com o barulho constante do tráfego, dos eventuais helicópteros que por vezes traziam gente para o trabalho às 7 da manhã, fogos de artifício e vizinhos gritando palavrões sempre que tinha um jogo de futebol e ainda os constantes eventos ali na região da Paulista.

Quando minha esposa engravidou pela segunda vez, decidimos começar o caminho de volta para o interior em busca de mais qualidade de vida. Não foi uma decisão fácil, mas que ocorreu naturalmente como consequência das prioridades que definimos para nossa família.

É preciso se desapegar

Fazer a migração inversa da capital para o interior não é algo fácil, pois nada vem de graça. É preciso abrir mão de certas coisas.

Ao continuar trabalhando na capital, eu mantive meu salário, mas abri mão de uma boa parte do meu tempo, do meu sono e de um pouco da qualidade de vida que eu poderia ter trabalhando na mesma cidade. Em contrapartida, minha família poderia usufruir dos benefícios da mudança.

Um grande impeditivo para uma mudança completa era a questão financeira. Como já mencionei, a diferença de remuneração entre capital e interior, ainda mais considerando São Paulo, pode ser muito grande.

Eu sabia que, cedo ou tarde, eu teria que abrir mão de uma parte da renda para colher o benefício completo de morar no interior.

Opções de viagem

Além do fretado, há as opções das linhas convencionais que saem da rodoviária e também do carro particular.

Quanto aos ônibus de linha, viajar diariamente é muito complicado. No fretado você consegue descansar mais, tem a possibilidade de descer num local mais apropriado que na Barra Funda (no caso de Sorocaba) e sai mais barato.

E quanto ao carro particular, nem mesmo considerei a possibilidade. Apesar de ser mais rápido, eu não poderia ir descansado, nem aproveitar o tempo da volta para ler, estudar ou trabalhar, além de gastar muito mais com combustível, pedágio, manutenção e estacionamento. Tudo somado à irritação do trânsito.

Considerando tudo isso, os fretados são a opção mais viável para quem faz o translado do interior para a capital três ou mais vezes na semana.

A rotina

A rotina diária de quem anda de fretado varia enormemente, dependendo da cidade e da sua localização dentro dela.

Eu acordava 5:10 para pegar o fretado às 5:35 no ponto mais próximo de casa. O ônibus chegava a São Paulo entre 7:30 e 8:00, de acordo com o trânsito do dia, que melhora bastante nas férias escolares. Descendo na estação Pinheiros do metrô, ainda tinha que pegar dois trens, linhas amarela e verde, até a estação Trianon/Masp na Avenida Paulista. Chegava ao trabalho entre 8:00 e 8:30.

Na volta, saía do trabalho por volta das 17:50 paga pegar o ônibus às 18:35 na marginal Pinheiros. O fretado geralmente entrava em Sorocaba pouco depois das 19:30, mas minha descida era perto das 20:15. Poderiam ainda ocorrer atrasos de até 2 horas nas sextas-feiras, vésperas de feriado ou quando ocorriam acidentes.

Contabilizando, eu passava praticamente 15 horas fora de casa. O trajeto de ida e volta levava em torno de 5 horas no total. Com uma esposa e dois filhos, sobrava pouco tempo para dormir. Após brincar com as crianças, jantar, tomar e ajudar a dar banho na pirralhada e se aprontar para dormir, o relógio já marcava meia noite. Isso se não houvesse mais nada para resolver. Minha média de sono, quando não tínhamos crianças com cólica, dente nascendo ou doentes era de 4 e meia a 5 horas durante a semana.

E, se você está pensando que eu compensava no final de semana, está enganado. Uma das grandes desvantagens de trabalhar dessa forma é só ter o sábado de manhã para resolver as coisas em sua cidade. Embora eu nem sempre conseguisse, iríamos fazer compras e resolver algumas coisas nas lojas do centro de Sorocaba no sábado pela manhã. Também era necessário ir ao supermercado e fazer alguma atividade com as crianças. No domingo tem a igreja pela manhã e a noite. Algumas poucas vezes consegui cochilar uma hora de tarde, conciliando o sono das crianças.

Você pode imaginar que, após algum tempo nessa vida, eu já estava um tanto desesperado por uma mudança efetiva para o interior.

Um ponto positivo dessa rotina é que eu tinha um tempo livre razoável no trajeto da volta para me concentrar. Li alguns livros, trabalhei em projetos pessoais e estudei bastante nesse tempo.

O fretado

Diariamente, centenas de ônibus fretados chegam a São Paulo de diversas cidades. Só de Sorocaba temos mais de uma dúzia de opções, variando o itinerário no trajeto dentro da cidade, no destino e no horário. Cada linha possui suas particularidades, mas no geral cada uma possui um coordenador que faz o controle dos passageiros e também os representa junto à empresa.

O valor dos fretados até agora (final de 2013) é de R$ 450,00 mensais. Provavelmente haverá um reajuste em breve, pois faz muito tempo que os valores estão congelados. Os mensalistas têm direito a um assento reservado, mas também existem algumas pessoas que utilizam apenas alguns dias, pagando o valor avulso, por considerarem os fretados mais confortáveis que os ônibus das linhas convencionais.

No trajeto de ida, as janelas vão com as cortinas fechadas para que todos possam descansar. Geralmente os vidros são escurecidos para evitar a luz em excesso. Os coordenadores pedem para que as pessoas evitem usar celulares ou dispositivos sonoros que possam incomodar os demais. Quanto a dormir nesse trajeto, isso varia de pessoa para pessoa. Conheci algumas que já estavam roncando alguns minutos após se acomodarem. Outras, como eu, muitas vezes não conseguiam nem cochilar devido ao ônibus chacoalhar, frear, ao movimento de quem entra, etc.

Existe ainda a questão de onde colocar o braço. Quando tem alguém do seu lado, não dá pra usar o apoio do meio, então você deve cruzar os braços ou apoiá-los de alguma forma para não ficar batendo na outra pessoa. Como eu tenho ombros largos isso às vezes era um problema e eu chegava com meu braço formigando pela posição.

Para quem gosta, alguns ônibus fazem uma confraternização na última sexta-feira do mês, durante a volta, com direito e jogos de cartas, bebidas e salgadinhos. Obviamente isso varia muito dependendo do ônibus estar cheio ou não e também conforme o coordenador.

No trajeto de retorno você pode aproveitar para usar seu notebook, tablet ou celular.  A maioria dos fretados, mas não todos, possui wi-fi via 3G. O sinal falha em alguns trechos, mas é possível fazer alguma pesquisa ou navegar em redes sociais. Outra opção é assistir ao filme que geralmente o coordenador coloca no sistema de DVD do ônibus.

Vale a pena trabalhar na capital viajando todos os dias?

Depende. Para quem possui moraria no interior e não tem filhos pode ser uma opção válida, principalmente porque os trabalhos na capital remuneram bem e agregam bastante no currículo.

Alguns já me sugeriram procurar uma casa mais afastada em São Paulo. O problema é que dentro de São Paulo o deslocamento pode chegar a 2 horas sem dificuldades. Uma dica: não reclame do tempo que você leva de viagem para quem mora em São Paulo, principalmente se a pessoa mora na Zona Leste ou outras regiões mais afastadas do centro. Para elas isso é completamente normal, já que estão acostumadas com longas viagens em uma combinação de ônibus, trem e metrô. Em certa ocasião, ao falar sobre isso, já olharam para mim com uma cara do tipo “você está reclamando do que?”.

Por outro lado, se você tem a necessidade de passar mais tempo no interior com a família e deseja melhorar em qualidade de vida, esqueça essas possibilidades. Como já afirmei, não podemos ter tudo, mas precisamos fazer uma escolha.

Se você trabalha na capital, morando lá ou viajando diariamente, talvez você se identifique comigo. Mas não se desespere. Meu conselho é que você comece a traçar um plano de migrar para o interior.

Migrando para o interior

Primeiro, faça um mapeamento das empresas da sua área para as quais você teria interesse em trabalhar. Procure por vagas nessas empresas e verifique se o seu currículo atende aos requisitos. Estude, faça cursos e o que mais for necessário para que você seja o mais desejável possível para essas empresas. Faça contatos e networking com pessoas da cidade, participe de eventos, adicione-as no LinkedIn. Esteja conectado com pessoas chave que trabalham nessas empresas, pois elas podem anunciar vagas em suas redes sociais, assim como os canais oficiais das empresas (página do Facebook, LinkedIn, sistema online de vagas).

Fique antenado para quando surgirem vagas boas que se encaixem no seu perfil profissional e esteja preparado para a entrevista, pois as oportunidades surgem logo.

Com essas dicas, o impacto na remuneração e no ambiente de trabalho pode ser minimizado, permitindo uma mudança mais suave e planejada, sem correria ou desespero.

O futuro do mercado de trabalho de TI

Existe uma esperança para quem é de TI (o que não exclui outras áreas também). Embora até agora todas as principais empresas estejam sediadas em capitais, estas estão saturadas e as empresas estão começando a ver com bons olhos algumas cidades do interior que possem universidades e faculdades suficientes para prover mão-de-obra qualificada.

Conheço algumas empresas que estão dando preferência para o interior, enquanto mantém um escritório de negócios na capital onde mantêm a carteira de clientes. Particularmente, eu acredito que esta seja uma solução muito mais adequada do que construir mais prédios e inventar mais soluções paliativas para o caos do transporte e moradia.

Meu apelo para os empresários que estão expandindo seus negócios é que comecem a pensar mais efetivamente nesse aspecto. Embora pareça haver mais dificuldades de administração e gastos com telefonia e teleconferências, certamente estes serão muito menores que o ganho obtido. Além disso, oferecer bons empregos no interior é um diferencial que pode atrair de forma eficiente mão-de-obra bem qualificada, pois, como eu, muitas pessoas capacitadas escolhem o interior por questões pessoais.

Conclusões

Trabalhar na capital e morar no interior é uma espécie de meio-termo entre qualidade de vida e oportunidades profissionais.

Entretanto, cedo ou tarde, nossa balança pessoal vai pender para um lado ou por outro. Se a prioridade é a carreira e as facilidades da vida, a capital é a melhor opção. Se, por outro lado, o são a família e a qualidade de vida, faz bem começar um “plano de fuga” para o interior.

Enfim, é possível equacionar tudo isso, mas infelizmente depende de cada um, pois como regra geral não somos ensinados desde cedo a considerar todas essas variáveis.

Installing, Configuring and Using Eclipse Kepler

Java Deixe um comentário

Eclipse is a IDE (Integrated Development Environment) extremely powerful and flexible, being the most used for various purposes: Java development, Android, C++, processes modeling, report design and so on.

Utilizing a good IDE is essential for productivity because its countless tools and features will make the difference in our daily searching for defects, refactoring, integrating with SCM (Source Control Management) like SVN, CVS, GIT, Mercurial or Bazaar, and other stuff.

Downloading Eclipse

Go to http://www.eclipse.org/downloads/ in order to download Eclipse IDE for Java EE Developers. Choose the corresponding version for your system, in my case, Windows x64. Look at the image below:

10_baixar_eclipse

When you click on the link, you’ll be redirected to another page where you will choose a “mirror”, that is, a copy of the file in a server next to you. Click on the green arrow to begin the download, according to the image:

11_baixar_eclipse_2

The download will start and the browser will show you this page:

15_baixar_eclipse_6

In the future, consider donating to make Eclipse even better.  😉

Installing Eclipse

In this and next tutorials, the directory c:\starcode will be adopted as the base directory for installing applications and storing files. If you want, replace “starcode” with the name of your company, organization or whatever you want, just avoiding whitespaces or special characters. Find the downloaded file, unpack it in the directory c:\starcode\eclipse, according to the following image:

12_baixar_eclipse_3

In this example, I’m using 7-Zip. Open the file and press F5 or go to menu File > Copy to.... In the dialog, type c:\starcode.

13_baixar_eclipse_4

Confirm and check if the content in the directory c:\starcode\eclipse is like the image:

14_baixar_eclipse_5

Configuring Eclipse

Before opening Eclipse, let’s tune a few parameters that affect the memory usage in order to get the a better general performance of our IDE. Edit eclipse.ini in your favorite text editor (I suggest Notepad++). The original file should be something like this:

-startup
plugins/org.eclipse.equinox.launcher_1.3.0.v20130327-1440.jar
--launcher.library
plugins/org.eclipse.equinox.launcher.win32.win32.x86_64_1.1.200.v20130807-1835
-product
org.eclipse.epp.package.jee.product
--launcher.defaultAction
openFile
--launcher.XXMaxPermSize
256M
-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
256m
--launcher.defaultAction
openFile
--launcher.appendVmargs
-vmargs
-Dosgi.requiredJavaVersion=1.6
-Xms40m
-Xmx512m

It’s important to understand exactly what we’re doing here, because the changes we’re going to do depend on the environment Eclipse is running. The following parameters will be modified or added:

  • X:MaxPermSize / launcher.XXMaxPermSize: this parameter defines the maximum amount of permanent memory Java will use to store information about class structure (bytecode). The “permanent” memory will limit the total of classes we can load in memory. This parameter should be increased if you have many projects with many jars each. The parameter launcher.XXMaxPermSize is used in older versions, so we’ll keep it for compatibility.
  • XX:PermSize: we’ll add this parameter to define the initial amount of permanent memory Java will allocate. If the value is too small, the performance will suffer because Java will in interrupt the execution of the program frequently in order to allocate more memory.
  • Xmx: defines the maximum amount of dynamic memory Java will allocate to store object instances and variables that can be allocated and deallocated at any moment.
  • Xms: defines the initial amount of dynamic memory.

The default value of XXMaxPermSize parameter is reasonable, but we’ll add XX:PermSize in order to obtain better initialization speed. That way Eclipse won’t need increase the memory many times.

The values of Xmx and Xms can be modified depending on your computer power. As I work in various projects and I have 8 Gigabytes of RAM, I’ll put a maximum of 2 Gigabytes in Xmx and an initial 512 Megabytes in Xms.

The final version of the configuration file goes like this:

-startup
plugins/org.eclipse.equinox.launcher_1.3.0.v20130327-1440.jar
--launcher.library
plugins/org.eclipse.equinox.launcher.win32.win32.x86_64_1.1.200.v20130807-1835
-product
org.eclipse.epp.package.jee.product
--launcher.defaultAction
openFile
--launcher.XXMaxPermSize
256M
-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
256m
--launcher.defaultAction
openFile
--launcher.appendVmargs
-vmargs
-Dosgi.requiredJavaVersion=1.6
-Xms512m
-Xmx2G
-XX:PermSize=128m
-XX:MaxPermSize=256m

Running Eclipse

Execute the file eclipse.exe. You’ll see the splash screen for a while:

16_eclipse_splash

After that, you’ll be welcomed with the Workspace selection screen (Workspace Launcher). A Workspace is a place (a directory, actually) where your Eclipse’s configurations are stored, containing as many projects as you like (even though they don’t need to be in the same place). It means that, with only one Eclipse install, you’re able to create many Workspaces in different directories and each one will have its specific and independent configuration and projects. Eclipse can be executed in multiples instances so you can work in multiples Workspaces simultaneously, with the exception that you cannot open the same Workspace in different instances at the same time.

Let’s continue. Type c:\starcode\workspace and click OK, as the image below, in order to create a brand new Workspace in this directory.

17_workspace_selection

Wait a few moments and finally your IDE will appear, showing the Welcome screen:

18_workspace_welcome

Close the Welcome screen clicking on Workbench link, at the top-right corner. Now, the main work screen will be presented:

19_eclipse_ide

Configuring the Workspace

Let’s do some basic and visual configuration. The first is to change the perspective. Eclipse is a multifunctional IDE and that means it allows you do different activities, for instance: write Java code, create database queries, debug the program, commit and update files from a remote repository, etc. Certain activities are associated to perspectives, which contain the components (named Views) more suitable for the task you are doing.

Go to Window > Open perspective > Java. Notice that the window changed a bit, according to the image below.

20_eclipse_java_perspective

Let’s quickly look at some components of that screen:

  • Main Menu (at the top): it gives you access to all available features. Some items and menus change according to the perspective currently selected or according to the file currently being edited.
  • Toolbar (below main menu): the buttons contain the most used actions and also change according to perspective or file.
  • Package Explorer (at the left): view that lists projects and their files.
  • Problems (at the bottom): view that shows errors and warnings found by compilers and validators in the build process.
  • Center screen (blank): editor where files will be opened and edited.

Notice the Quick Access box near the top-right corner. You can type anything there (configuration name, file name, etc.) and Eclipse instantaneously will show you the results. At the right of this box, the recently used perspectives are listed, so you can swap to another one quickly at any time.

I’ll close the views TaskList and Outline, because we won’t use them in this example.

Let’s do also some configuration in order to speed our work up. Firstly, if your first language is not English, turn off spell checking. Go to Window > Preferences..., search for “Spelling” and uncheck the main option, according to the image:

21_disable_spelling

In case you’re under a proxy server, go to Network Connection configurations. Know that some plugins won’t work even with this configuration. Unfortunately, proxies with NTLM authentication cannot be configured through this method. Check your proxy type, maybe the solution is out of scope for this tutorial.

22_network

If you have JDK correctly installed, Eclipse should found it and add it automatically to its configuration. However, check if it’s ok in  Installed JREs.

23_installed_jre

After accomplish your desired configurations, press OK button.

Creating a test project

Let’s create a simple project with goal of verify the installation and make you comfortable with Eclipse environment. Go to menu File > New  > Java Project. Give it a name and press Finish.

24_create_project

Package Explorer view will display the new project. Click on the arrow at left to show its content.

25_project_created

Let’s create a Java class. Go to File > New > Class or just click on the red-circled button highlighted in the image.

In the next screen, fill Package field out with the value br.com.starcode.teste. The default convention for naming packages is to use always lower case characters and avoid numerals, unless in special cases. Subpackages are separated using the dot character (.). Type also the class name in the Name field. Class names should follow the CamelCase convention, that is, an initial upper-case character for each word, for instance: “MyFirstClass”. Avoid special characters and numbers. For now, check the option “public static void main(String[] args)” and press Finish.

26_create_class

Now we should have this view:

27_new_class

Let’s edit the main method of our class. This method is “special” to Java in the sense the program will start its execution by this method. So, remove the line with TODO comment and then type the following in its place:

System.out.println("Testando o Programa!");

We should have this:

28_code

Don’t forget to save the file. Press Ctrl+S or click File > Save.

Finally, let’s run our first Java program. Click with the right button on the class and go to menu Run As > Java Application.

29_run_java_application

The Console view will appear, showing the output of our program and proving the success of the execution.

30_run_result

Debugging the program

With the previous example, let’s suppose for any reason you need to find a bug. In order to do that you need to stop the program execution at some point and run it line by line, inspecting variables values and following the behavior of the program.

Before we start debugging, let’s create a breakpoint, that is, let’s mark the line we want interrupt the execution of the program. There are many ways to accomplish that, for instance:

  • Go to the line with the cursor and press Ctrl+Shift+B.
  • Double-click the blue bar at left of the editor, in the same direction of the target line.

30_breakpoint

  • Right-click the blue bar at left of the editor and choose Toggle Breakpoint option.

30_breakpoint 2

As a result, we have a small blue circle at the left of the line, as the image below.

30_breakpoint done

In order to remove the breakpoint, do again one of the procedures above (shortcut, double-click or menu).

Now, let’s run the programming in debug mode. Right-click the class and go to Debug As > Java Application.

30_debug as menu

After starting the execution, when the program reach a breakpoint, Eclipse will ask if you want to change for debug perspective.

30_change perspective

Choose Yes and Eclipse screen will change, showing other views and then, in the editor, the current line to be executed in light green.

30_breakpoint stopped

Check out some details of the screen above:

  • Debug: view showing program threads and the stack of method calls. As we have only one simple program, there’s only one thread. And as we’re in the main class, the only item in the stack is our class, its method and the number of the line being executed.
  • Variables: view showing variables in the current scope. You can look at and also change the values here.
  • Breakpoints: view showing all breakpoints set in the Workspace.

Until this moment, the execution is interrupted at line 7. You can inspect the values of variables in the current scope and also run a snippet of code in order to see the value returned by it through Inspect.

We haven’t any variables, so let’s inspect the text contained in println function. Select the text, right-click the selection and go to Inspect.

30_inspect menu

Java will execute the selected snippet and show the result in a yellow box, according to this image:

30_inspect result

Even though in this example we have only a simple String to inspect, we could have done it with any snipped that return a value like a method call or an arithmetic expression. Just take care with Inspect because the code is actually executed, so it can change the state of your program, affecting instances, variables and its values.

Tips for project maintenance and organization

Soon your Workspace may become bloated with projects and, consequently, Eclipse performance and your user experience will get worse. Of course, you can separate your projects in different Workspaces, but there are other alternatives.

Let’s create an additional project for this example. Follow the previous steps, but this time, use another name.

31_second_project

Now our Workspace is like this:

32_two_projects

Let’s suppose now, we won’t work in the first project for a while. We can close it so it’ll exists, but won’t use any of our precious resources. When we close a project, Eclipse won’t list its files nor will cache its classes. In order to close a project, right-click the project and choose Close Project.

33_close_project

The project icon will change and you will be unable to access its content until you open it gain.

34_closed_project

In order to open the project, double-click it or right-click it and choose Open Project. You don’t need to do it right now.

Going to another example, let’s suppose you have many projects in your Workspace. Is there a way to group and organize them properly? For that reason there are Working Sets.

Let’s create two Working Sets. Open the menu of Package Explorer view (as indicated in red in the image below) and then go to Top Level Elements > Working Sets.

35_view_menu

The Working Sets configuration screen will be displayed:

36_configure_working_sets

In the first place, let’s create a Working Set called “Main Projects” containing our first project. Press New... button, type the Working set name, add the project in the right list (Working set content) and press Finish.

37_new_working_set1

Then press New... again and repeat the procedure to create another Working Set called “Secondary Projects”, this time including the other project we created.

38_new_working_set2

Now you can sort the Working Sets. Select an item in the list and press Up in order to move the item up or Down in order to move the item down. The final order goes like this:

39_organizing_workingsets

Press OK and check out the result:

40_organized_projects

Finally, if you want delete a project from your Workspace, select it and press Delete. A confirmation dialog will be shown.

41_delete_project

Notice the option “Delete project contents on disk (cannot be undone)”. If this option is not checked the project will be removed from Workspace, but the files will remain in the Hark Disk. It’s important if you don’t want lost data or when the project is used in another Workspace. In case the option is checked, the project and all its files will not only be removed from Eclipse, but erased from the Hard Drive, so you won’t be able to recover them later.

Summary

In this tutorial you learned how to download, install and configure Eclipse. You also had some examples of how to create, organize, run and debug a simple Java program.

Despite of being a basic introduction, this tutorial will give you the foundation to more advanced topics, which I’ll soon make available.

Instalando, Configurando e Usando o Eclipse Kepler

Java 12 Comentários

O Eclipse é um IDE (Integrated Development Environment, ou Ambiente de Desenvolvimento Integrado) extremamente poderoso e flexível, sendo o mais utilizado no mercado e para diversas finalidades: desenvolvimento Java, Android, C++, modelagem de processos, desenho de relatórios e assim por diante.

Utilizar um bom IDE é essencial para a produtividade, pois suas inúmeras ferramentas e funcionalidades farão a diferença no dia-a-dia na procura por defeitos, formatação e melhoraria do código, integração com sistemas SCM (Source Control Management ou Gerência de Configuração), como SVN, CVS, GIT, Mercurial ou Bazaar e muitas coisas.

Baixando o Eclipse

Acesse http://www.eclipse.org/downloads/ para baixar o Eclipse IDE for Java EE Developers. Escolha a versão correspondente ao seu sistema, que no meu caso é um Windows 64 bits. Veja a imagem abaixo:

10_baixar_eclipse

Ao clicar no link, você será redirecionado para outra página onde poderá escolher um “espelho” (mirror), isto é, uma cópia do arquivo que esteja num servidor próximo de onde você mora. Clique na seta verde para efetivamente iniciar o download, conforme a imagem:

11_baixar_eclipse_2

O download será iniciado e o navegador exibirá a seguinte página:

15_baixar_eclipse_6

No futuro, considere contribuir para tornar o Eclipse ainda melhor.  😉

Instalando o Eclipse

Neste e nos próximos tutoriais, o diretório c:\starcode será adotado como base para a instalação de programas e para armazenamento de arquivos. Caso queira, substitua “starcode” pelo nome da sua empresa, organização ou o que desejar, somente evite espaços em branco e acentos. Procure o arquivo baixado com o Eclipse e descompacte no diretório c:\starcode\eclipse, conforme as imagens abaixo:

12_baixar_eclipse_3

Neste exemplo, estou usando o 7-Zip. Abrindo o arquivo baixado, pressione F5 ou clique no menu Arquivo > Copiar Para.... Na caixa de diálogo, digite c:\starcode.

13_baixar_eclipse_4

Confirme e verifique se o conteúdo do diretório c:\starcode\eclipse está conforme a imagem:

14_baixar_eclipse_5

Configurando o Eclipse

Antes de executar o Eclipse, vamos ajustar alguns parâmetros de uso de memória para melhorar o desempenho geral de nosso IDE. Edite o arquivo eclipse.ini no seu editor de textos favorito (sugiro usar o Notepad++). O arquivo original deve conter algo assim:

-startup
plugins/org.eclipse.equinox.launcher_1.3.0.v20130327-1440.jar
--launcher.library
plugins/org.eclipse.equinox.launcher.win32.win32.x86_64_1.1.200.v20130807-1835
-product
org.eclipse.epp.package.jee.product
--launcher.defaultAction
openFile
--launcher.XXMaxPermSize
256M
-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
256m
--launcher.defaultAction
openFile
--launcher.appendVmargs
-vmargs
-Dosgi.requiredJavaVersion=1.6
-Xms40m
-Xmx512m

É importante entender o que estamos fazendo, pois este ajuste depende da configuração do computador onde o Eclipse será executado. Os seguintes parâmetros serão ajustados ou adicionados:

  • X:MaxPermSize / launcher.XXMaxPermSize: este parâmetro define a quantidade máxima de memória permanente que o Java irá usar para armazenar informações sobre estrutura de classes (bytecode). A memória “permanente” irá limitar a quantidade de classes que podemos usar. Este parâmetro deve ser aumentado se você tiver muitos projetos com muitos jars diferentes. O parâmetro launcher.XXMaxPermSize serve para algumas versões do Eclipse, então vamos mantê-lo por questões de compatibilidade.
  • XX:PermSize: iremos acrescentar este parâmetro para definir a quantidade inicial de memória permanente que o Java irá alocar. Se o valor deste parâmetro for muito pequeno, o desempenho do aplicativo será prejudicado em alguns momentos, pois o Java terá que interromper a execução para alocar mais memória frequentemente.
  • Xmx: define a quantidade máxima de memória dinâmica que o java irá alocar para instâncias de objetos e variáveis que são alocados e desalocados a qualquer momento.
  • Xms: define a quantidade inicial de memória dinâmica.

O valor padrão do parâmetro XXMaxPermSize está razoável, mas acrescentaremos o XX:PermSize para melhorar o tempo de inicialização do Eclipse, de modo que ele não tenha que ficar alocando memória muitas vezes.

Já os valores de Xmx e Xms podem ser ajustados dependendo da configuração do seu computador. Como eu trabalho com vários projetos e tenho 8 Gibabytes de memória RAM, irei colocar um valor máximo de 2 Gigabytes de memória no Xmx e um valor inicial de 512 Megabytes no Xms.

O arquivo de configuração final ficou assim:

-startup
plugins/org.eclipse.equinox.launcher_1.3.0.v20130327-1440.jar
--launcher.library
plugins/org.eclipse.equinox.launcher.win32.win32.x86_64_1.1.200.v20130807-1835
-product
org.eclipse.epp.package.jee.product
--launcher.defaultAction
openFile
--launcher.XXMaxPermSize
256M
-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
256m
--launcher.defaultAction
openFile
--launcher.appendVmargs
-vmargs
-Dosgi.requiredJavaVersion=1.6
-Xms512m
-Xmx2G
-XX:PermSize=128m
-XX:MaxPermSize=256m

Executando o Eclipse

Execute o arquivo eclipse.exe. Você verá por algum tempo o splash a seguir:

16_eclipse_splash

Depois você será saudado com a tela de seleção de Workspace (Workspace Launcher). Um Workspace consiste num local (diretório) onde ficarão as suas configurações do Eclipse e pode também conter vários projetos (embora não seja necessário que os projetos estejam no mesmo local). Isso significa que, com uma única instalação do Eclipse, você pode criar vários Workspaces em diferentes diretórios e cada um terá suas configurações e projetos específicos e independentes. O Eclipse pode ser executado mais de uma vez e assim você pode trabalhar em múltiplos Workspaces simultaneamente, porém não é possível abrir o mesmo Workspace em duas instâncias do Eclipse.

Digite o valor c:\starcode\workspace, conforme a imagem abaixo, para criar um novo Workspace no diretório informado e clique em OK.

17_workspace_selection

Aguarde alguns instantes e finalmente o IDE irá aparecer, exibindo a tela de boas-vindas (Welcome):

18_workspace_welcome

Feche a tela de boas-vindas clicando no link Workbench, no canto superior direito. Neste momento a tela de trabalho do Eclipse será apresentada:

19_eclipse_ide

Configurando o Workspace

Vamos realizar algumas configurações básicas e visuais. A primeira é trocar a perspectiva de trabalho. O Eclipse é um IDE multifuncional e isso significa que ele lhe permite executar diversas atividades, por exemplo: codificar em Java, criar consultas a bancos de dados, depurar a execução do programa (debug), sincronizar os arquivos locais com um repositório remoto, etc. Certas atividades estão associadas a perspectivas, as quais contém os componentes (chamados de Views) adequados para a tarefa que você está realizando.

Clique no menu Window > Open perspective > Java. Note que que a janela mudou ligeiramente, conforme a imagem abaixo.

20_eclipse_java_perspective

Vamos analisar rapidamente alguns componentes da tela:

  • Menu principal (no topo da tela): acesso às funcionalidades atualmente disponíveis. Alguns menus podem mudar dependendo da perspectiva atualmente selecionada ou do arquivo atualmente sendo editado.
  • Barra de ferramentas (abaixo do menu principal): os botões contém ações mais comuns e também podem mudar dependendo da perspectiva e do arquivo.
  • Package Explorer (esquerda): view que lista os projetos e arquivos dos projetos.
  • Problems (parte de baixo): view que exibe erros e alertas encontrados nos projetos.
  • Tela central (em branco): editor onde serão abertos os arquivos.

Note ainda no canto superior direito a caixa Quick Access, onde você pode digitar qualquer coisa (configuração, nome de arquivo, etc.) e o Eclipse irá retornar os resultados rapidamente. À direita desta caixa estão listadas as perspectivas recentemente utilizadas, então você pode trocar facilmente a qualquer momento.

Irei fechar as views TaskList e Outline, pois não iremos utilizá-las neste momento.

Vamos realizar também algumas configurações para otimizar nosso trabalho. A primeira é desligar o corretor ortográfico em Inglês, caso contrário tudo o que escrevermos em Português ficará sublinhado de vermelho. Acesse o menu Window > Preferences..., pesquise pela configuração Spelling e desmarque a opção principal, conforme a tela abaixo:

21_disable_spelling

Caso esteja acessando a Internet sob um servidor Proxy, configure-o em Network Connection. Note que alguns plugins do Eclipse não funcionarão adequadamente mesmo com essas configurações de Proxy. Além disso, Proxies com NTLM não podem ser configurados através deste método. Verifique o tipo de Proxy que você possui e, se tiver dificuldades, serão necessárias soluções mais específicas que estão fora do escopo deste tutorial.

22_network

Se você tem um JDK devidamente instalado, o Eclipse deve tê-lo encontrado e adicionado automaticamente à sua configuração. Entretanto, verifique se está correto na configuração Installed JREs.

23_installed_jre

Após realizar as configurações acima, clique em OK.

Criando um projeto para teste

Vamos criar um projeto simples com o objetivo de verificar a instalação e permitir que você se acostume com o ambiente do Eclipse. Acesse o menu File > New  > Java Project. Dê um nome ao projeto e clique em Finish.

24_create_project

A view Package Explorer irá exibir o novo projeto. Clique na seta à esquerda do nome para mostrar seu conteúdo.

25_project_created

Vamos criar uma classe Java. Acesse File > New > Class ou simplesmente clique no botão indicado em vermelho na figura acima.

Na próxima tela, preencha o campo Package com o valor br.com.starcode.teste. O padrão para nomes de pacotes é usar sempre letras minúsculas, não usar caracteres especiais, números somente em situações especiais. Subpacotes são definidos usando o caractere de ponto final (.). Preencha também o campo Name com o nome da classe. Nomes de classes devem manter o padrão CamelCase, isto é, usa-se maiúsculas nas inicias das palavras, por exemplo “MinhaPrimeiraClasse”. Evite caracteres especiais e números. Marque a opção “public static void main(String[] args)” e clique em Finish para confirmar a criação da classe.

26_create_class

Veja como está a visualização:

27_new_class

Vamos editar o método main da nossa classe. Este método é especial para o Java, pois a execução do programa incia-se nele. Primeiro remova a linha com o comentário TODO, depois digite o conteúdo abaixo no lugar:

System.out.println("Testando o Programa!");

Teremos o conteúdo da imagem abaixo.

28_code

Não se esqueça de salvar o arquivo. Pressione Ctrl+S ou clique em File > Save.

E finalmente vamos executar nosso primeiro programa em Java. Clique com o botão direito do mouse sobre a classe e acesse o menu Run As > Java Application.

29_run_java_application

A view Console será aberta, exibindo a saída que nosso programa imprimiu e provando o sucesso da execução.

30_run_result

Depurando o programa

Aproveitando o exemplo da execução, vamos supor que você precisa fazer a depuração (debug) do programa por algum motivo. A depuração permite interromper temporariamente a execução do programa em um determinado ponto, inspecionar e alterar valores de variáveis e continuar a execução linha a linha para analisar o comportamento do programa.

Antes de iniciar a depuração, vamos criar um breakpoint, isto é, vamos marcar a linha onde queremos que a execução do programa seja interrompida. Existem várias formas de fazer isso, por exemplo:

  • Clique na linha desejada e pressione Ctrl+Shift+B.
  • Dê um duplo clique na barra azul à esquerda do editor, na altura da linha desejada.

30_breakpoint

  • Clique com o botão direito na barra azul à esquerda do editor e selecione a opção Toggle Breakpoint.

30_breakpoint 2

O resultado é uma bolinha azul à esquerda da linha, conforme a imagem abaixo.

30_breakpoint done

Para remover o breakpoint, execute novamente um dos procedimentos citados (tecla de talho, duplo clique ou menu de texto).

Agora vamos executar o programa em modo de depuração (debug mode). Clique com o botão direito sobre a classe e acesso o menu Debug As > Java Application.

30_debug as menu

Após o início da execução, quando um breakpoint for encontrado, o Eclipse irá perguntar se você deseja mudar a visualização para a perspectiva Debug.

30_change perspective

Clique em Yes e a tela do Eclipse mudara, exibindo outras views e a linha atual sendo executada em verde claro no editor.

30_breakpoint stopped

Confira alguns detalhes da tela acima:

  • Debug: view que exibe as threads do programa atual e a pilha de chamadas. Como temos apenas um programa simples, há apenas uma thread. E como estamos na classe principal, o único item da pilha consiste do nome da classe, do nome do método e do número da linha sendo executada.
  • Variables: view que exibe as variáveis do escopo atual, de forma que você pode ver e até modificar os valores.
  • Breakpoints: view que exibe todos os breakpoints do workspace.

Neste momento, estamos com a execução do programa interrompida na linha 7. Além de conferir as variáveis do escopo atual, você pode executar um trecho do código e conferir o valor retornado através do Inspect.

Como não temos nenhuma variável, vamos inspecionar o texto contido na função println. Selecione o texto, clique com o botão direito e selecione o menu Inspect.

30_inspect menu

O Java irá executar o trecho selecionado e retornar o resultado numa caixa amarela, conforme a imagem abaixo:

30_inspect result

Embora em nosso exemplo tenhamos usado uma String simples, poderíamos ter feito com qualquer trecho, por exemplo, uma conta matemática ou uma chamada de método. Apenas tome um certo cuidado com a função Inspect, pois o código selecionado é realmente executado, afetando variáveis e valores do seu programa.

Dicas para organização e manutenção de projetos

Logo seu Workspace pode ficar abarrotado de projetos e, consequentemente, o desempenho do Eclipse e sua experiência como desenvolvedor cairão drasticamente. Além de separar seus projetos em vários Workspaces, existem técnicas que ajudam no dia-a-dia, tanto no que se refere à organização quanto ao desempenho.

Vamos criar um projeto adicional para efeito de exemplo. Siga os passos anteriores, mas crie um projeto com outro nome.

31_second_project

Veja como ficou o Workspace:

32_two_projects

Seguindo nosso exemplo, vamos supor que não queremos mais usar o primeiro projeto por algum tempo. Nós podemos fechá-lo, de modo que ele ainda existirá, mas não ocupará recursos. Ao fechar um projeto, o Eclipse não listará os arquivos nem fará cache das classes contidas nele. Para fechar um projeto, clique com o botão direito sobre ele e selecione a opção Close Project.

33_close_project

O ícone do projeto vai mudar e você não poderá mais acessar o seu conteúdo até abri-lo novamente.

34_closed_project

Se desejar abrir o projeto para acessar os arquivos, dê um duplo clique no mesmo ou clique com o botão direito e selecione o menu Open Project. Não precisa fazer isso agora.

Partindo para outro exemplo, vamos supor que você está com muitos projetos no Workspace. Há alguma forma de agrupá-los e organizá-los adequadamente? Para isso existem os Working Sets.

Vamos criar dois Working Sets. Clique no menu da view Package Explorer (conforme indicado em vermelho na imagem abaixo) e então selecione a opção Top Level Elements > Working Sets.

35_view_menu

A tela de configuração dos Working Sets é exibida:

36_configure_working_sets

Primeiramente vamos criar um Working Set chamado “Projetos Principais” com o nosso primeiro projeto. Clique no botão New..., digite o Working set name, adicione o projeto na lista da direita (Working set content) e clique em Finish.

37_new_working_set1

Depois, clique novamente em New... e repita a operação para criar outro Working Set chamado “Projetos Secundários”, incluindo desta vez o segundo projeto que criamos.

38_new_working_set2

Após confirmar a inclusão você pode ordenar os Working Sets. Selecione um item da lista e clique em Up para mover o item para cima ou em Down para mover o item para baixo. A ordenação final ficou da seguinte forma:

39_organizing_workingsets

Clique em OK e confira o resultado:

40_organized_projects

Por fim, se quiser excluir um projeto do seu Workspace, selecione o item e pressione a tecla Delete. Uma tela de confirmação será exibida.

41_delete_project

Note que existe uma opção chamada “Delete project contents on disk (cannot be undone)”. Caso a opção não esteja marcada o projeto será excluído do Workspace, mas não do seu disco rígido. Isso é importante caso não queira perder os dados ou esteja usando o projeto em outro Workspace. Caso a opção esteja marcada, o projeto e todos os arquivos contidos nele serão removidos não apenas do Eclipse, mas também apagados do seu disco, não sendo possível recuperá-los.

Resumo

Neste tutorial você aprendeu a baixar, instalar, configurar o Eclipse. Também viu como criar e organizar projetos, além de executar e depurar um programa simples em Java.

Apesar de tratar-se de uma introdução básica, este tutorial lhe dá uma base para avançar para usos mais avançados da plataforma Java, os quais disponibilizarei em breve.

Página 10 de 16

← Anterior

Próxima →

Follow

State Of The Art Blog

Novos artigos por e-mail. Sem spam!

Acompanhe minhas respostas no Stack Overflow em Português.

Perfil de utluiz em Stack Overflow em Português, é um site de perguntas e respostas para programadores profissionais e entusiastas

Popular

Descubra

Categorias

Arquivos

Tags

agile ambiente de trabalho apostila apresentação automação boas práticas bootstrap css curso desempenho desenvolvimento profissional design patterns dica eclipse emprego engenharia de software estimação estudo estudo de caso framework web gerenciamento de projetos html5 javascript jquery maturidade maven meme monografia mythical man-month oracle play! framework programação python reflexões requisitos segurança sql server stackoverflow sysdeo tdd testes tomcat transação tutorial ubuntu linux

Social

Github LinkedIn Twitter Página do Blog no Facebook Google+

Creative Commons O blog State of the Art de Luiz Ricardo é licenciado sob uma Licença Creative Commons. Copie, compartihe e modifique, apenas cite a fonte.