framework

Qual a diferença entre Framework e Biblioteca?

Olá Web Developers! Você sabe qual a diferença entre Framework e Biblioteca? Pois esta é uma dúvida muito comum em programadores de vários níveis. Vamos entender melhor as características de cada um para finalmente entender do que se tratam.

O que são Bibliotecas?

Estantes em uma biblioteca com vários livros

Vamos imaginar que precisamos calcular quantos dias existem entre duas datas utilizando JavaScript. Mas no momento não há uma funcionalidade da linguagem que faça este cálculo para nós. Então teremos que criar uma função em que a gente passe duas datas e ela nos retornará a quantidade de dias.

E depois pode aparecer a necessidade de pegar uma data e adicionar um certo número de dias. Que data teremos como resultado? E se precisarmos adicionar horas ou minutos?

A príncipio podem parecer funções sem conexão, mas note que estamos falando de cálculos que nos remetem a tempo. Com o intuito de deixar o código mais organizado, podemos juntar estas funções em uma “coleção” de funções relacionadas ao cálculo de tempo.

Em conclusão, podemos dizer que uma biblioteca (do inglês library, não confundir com livraria que em inglês é book store) é uma coleção de códigos voltados a resolver um determinado tipo de problema.

Exemplos de Bibliotecas JavaScript

  • Moment.js: Biblioteca para converter, validar, manipular e exibir datas e horários
  • Chart.js: Biblioteca para a criação de gráficos
  • Voca: Biblioteca para trabalhar com Strings
  • mo.js: Biblioteca para criar animações incríveis com SVG. Já fizemos um post sobre como começar com o mo.js
  • React: Biblioteca para criar interfaces de usuário. Se quiser conhecer um pouquinho, temos um post aqui no blog para você conhecer o React
React - Despertando o Poder dos Hooks
Curso de React - Despertando o Poder dos Hooks
CONHEÇA O CURSO

O que são Frameworks?

Já fizemos um post sobre o propósito dos frameworks. Mas vamos fazer uma pequena recapitulação.

Um framework possui várias funcionalidades prontas, e normalmente já possuem um fluxo de trabalho ou estrutura a serem seguidos. É algo bem mais abstrato do que uma biblioteca. Isso realmente confunde muitas pessoas. Por exemplo, o jQuery se autodenominava um framework, mas já faz um bom tempo que ele se chama de biblioteca.

O foco dos frameworks é mais amplo que das bibliotecas. Aliás, um framework pode ser feito a partir de uma coleção de padrões, APIs e até mesmo de bibliotecas.

Só para exemplificar, o Angular, framework JavaScript para desenvolvimento de aplicações, é feito a partir de bibliotecas de animação, requisições http, internacionalização, testes, tratamento de dados em formulários, reatividade, roteamento, etc.

Exemplos de Frameworks JavaScript

  • Angular: Framework para criação de aplicações web
  • Vue.js: Framework também para criação de aplicações web
  • Ionic: Framework para criar aplicativos mobile com Angular, React ou Vue
  • Express: Framework para criar aplicações com Node.js
  • LoopBack: Framework para criar APIs e microserviços com Node.js
Angular - Tópicos avançados
Curso de Angular - Tópicos avançados
CONHEÇA O CURSO

Mas então, qual a diferença entre Framework e Biblioteca?

Por mais que a gente tenha visto características de framework e biblioteca, ainda assim há confusão, pois nem sempre as funções do software deixa claro a sua natureza. É provável até que não seja nenhum dos dois. Bem como também é comum ver lugares chamando Angular de biblioteca e React de framework, sendo que na verdade é ao contrário.

Antes de tudo, algo que podemos notar além das diferenças já mostradas aqui é que normalmente as bibliotecas são usadas pelos nossos códigos, enquanto os frameworks é quem costumam utilizar os nossos códigos.

Por isso podemos diferenciar React de Angular. Se acaso você já usou os dois verá as seguintes diferenças:

No React nós temos basicamente funções para a criação de componentes e criação de estados. Estamos no controle o tempo todo, nós chamamos as funções do React, podemos decidir qual será a estrutura da nossa aplicação e o fluxo com o qual ela funciona. Se acaso a gente precisar de funcionalidades de roteamento, animações, internacionalização, etc, precisaremos buscar bibliotecas para isso.

function App(props) {
    return (
      <div>
        Olá, {this.props.name}!
      </div>
    );
}

ReactDOM.render(
  <App name="Taylor" />,
  document.getElementById('hello-example')
);

Em contrapartida no Angular todas essas funcionalidades já vêm inclusas. Há uma estrutura que devemos seguir (componentes, serviços, pipes, rotas, módulos), e o Angular é quem vai chamar o nosso código seguindo seu próprio fluxo. Essa característica de já ter uma estrutura é o principal diferencial entre um framework e uma biblioteca. Você pode notar que em nenhum momento nós chamamos alguma função como Angular.nomeFuncao(). Eventualmente, caso queira fazer algo num fluxo ou estrutura diferente, o Angular não vai entender e você terá um erro.

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {

}

Veja como já temos uma estrutura a seguir. É como se no framework nós precisássemos preencher os campos que ele pede, é ele quem está no controle de tudo.

Qual o melhor? Framework ou Biblioteca?

Podemos concluir que enquanto na biblioteca nós mesmos criamos a base e o fluxo, no framework já temos toda a estrutura pronta para utilizarmos e seguirmos. Mas isso não significa necessariamente que um é melhor do que o outro. São ferramentas diferentes para propósitos diferentes.

Ao passo que no Angular nós já temos toda a estrutura pronta, nos poupando desse trabalho, teremos menos liberdade para certas escolhas. Em contrapartida, no React temos que definir coisas comuns como arquitetura e fluxo, mas teremos mais liberdade de escolher cada biblioteca responsável por cada funcionalidade em nossa aplicação.

Desenvolvedor Front-end Sênior
Formação: Desenvolvedor Front-end Sênior
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé.Nesta formação aprenderemos Sass, Google Analytics, empacotar nossas aplicações com Webpack, criação de aplicações Desktop com Electron, UX/UI e uma introdução aos frameworks mais utilizados no mercado: Angular, React, Vue e Ember.
CONHEÇA A FORMAÇÃO

O que é o Vue.js?

Atualmente, graças à popularização do JavaScript, existe uma grande variedade de frameworks front-end para diferentes propósitos. Neste artigo, será abordado o Vue.js, um dos frameworks JavaScript SPA da atualidade.

Afinal, o que é Vue.js?

É um framework JavaScript open source para a criação de aplicações web, criado por Evan You em 2014. O Vue.js possibilita criar aplicações de forma reativa. O Vue.js faz a utilização de um DOM virtual, o que faz com que seja extremamente performático na maioria das situações. Além disso, conta com uma arquitetura muito bem estruturada por meio da criação de componentes reusáveis.

Este framework é muito utilizado para criar aplicações SPA (Single Page Applications) e também para desenvolver vários outros tipos de interfaces, com foco na interação e experiência do usuário. Atualmente e não à toa, o Vue.js está entre os frameworks Javascript para criação de interfaces mais populares do mundo, devido à sua baixa curva de aprendizado, sua versatilidade e por oferecer uma solução bem completa – contando até mesmo com uma CLI, o Vue CLI.

Além disso, possui uma boa documentação oficial (inclusive em português) e sua comunidade é bem ativa e não para de crescer. Dessa forma, o Vue.js é um dos frameworks prediletos por parte dos desenvolvedores, como podemos ver pelo StackOverflow Insights.

gráfico Vue.js

Vantagens e desvantagens

Vantagens
  • Acessível: com um conhecimento básico em HTML, CSS e JavaScript, você já consegue construir uma aplicação básica;

  • Versátil: possui um ecossistema incremental e progressivo, oferecendo soluções prontas e padronizadas para a grande maioria das situações;

  • Excelente desempenho;

  • Progressivo: se você já tiver uma aplicação server-side por exemplo, você pode utilizar o Vue em apenas uma parte da aplicação, utilizando inclusive somente os módulos que sejam de fato necessários.

Desvantagens
  • Complexidade do paradigma reativo: este framework “leva a sério” os princípios da programação reativa, o que pode trazer um pouco de complexidade no começo;

  • Excesso de flexibilidade: o Vue.js é um framework extremamente flexível e não muito opinativo, o que pode trazer problemas de falta de padronização de código em algumas equipes e em projetos de maior escala;

  • Recursos um pouco mais limitados em relação a outros frameworks SPA: embora o Vue.js seja querido e conte com uma comunidade bem ativa, oferecendo uma série de soluções para os problemas mais comuns; o Vue.js ainda não conta com a mesma quantidade de recursos (como plugins) que seus concorrentes diretos possuem – o Angular e o React.

Vue.js - Criação de interfaces web
Curso de Vue.js - Criação de interfaces web
CONHEÇA O CURSO

Considerações finais

Por fim, podemos ver que este é um framework que vem evoluindo, proporcionando cada vez mais recursos em relação às suas primeiras versões. É uma boa escolha para um framework JavaScript SPA, sendo bem simples de se trabalhar, se destacando pela sua simplicidade, sua progressividade e sua flexibilidade.

Por último e não menos importante, vale lembrar que não existe “o melhor framework”: essa escolha certamente irá variar muito de acordo com cada projeto. Para determinados projetos, o Vue.js pode ser a melhor solução; assim como para outros projetos talvez o Angular ou o React sejam escolhas melhores. Não existe o “melhor” ou o “pior” framework, e sim aquele que melhor se adeque à necessidade de cada projeto.

O que é Bootstrap?

Os frameworks são ferramentas incríveis e que poupam muito tempo dos desenvolvedores. Neste artigo, vamos conferir o Bootstrap, um dos mais populares frameworks front-end atualmente.

Afinal, o que é o Bootstrap?

O Bootstrap é um framework front-end gratuito e de código-fonte aberto, que disponibiliza componentes prontos para você utilizar em seu projeto. Com ele, você consegue criar e personalizar sites responsivos para dispositivos móveis, desktops e notebooks, com componentes pré-construídos e com plugins JavaScript poderosos. Tudo isso porque toda a estrutura do HTML, CSS e Javascript já se encontram prontas, bastando apenas que o desenvolvedor importe suas dependências em seu projeto.

Por exemplo: se você quer colocar em seu site um botão estilizado, você pode utilizar o componente button do Bootstrap diretamente, ou mesmo fazer pequenas customizações no componente para que ele tenha a aparência desejada. Com estes componentes pré-prontos, você ganha tempo, o que consequentemente faz com que seu projeto seja finalizado mais rapidamente, com menos esforço e até mesmo com mais qualidade.

Primeiramente, o Bootstrap foi desenvolvido pelo Twitter, onde inicialmente era apenas um projeto para padronizar o desenvolvimento dentro da própria empresa. Porém, no meio do desenvolvimento do projeto, a equipe percebeu o potencial que este framework tinha para impactar e trazer benefícios para a comunidade. Dessa maneira, ele foi liberado em 2011 já como um projeto open source, ou seja, para que os outros desenvolvedores pudessem contribuir. De lá pra cá, nesse meio tempo, foram muitas mudanças até chegar sua atual versão 4, que possui inúmeras novidades tanto nos componentes CSS quanto nos componentes JavaScript.

Por que utilizar o Bootstrap?

O Bootstrap segue os princípios de usabilidade e tendências de design para interfaces. Além disso, sua padronização permite que os sites tenham um visual atraente, ou seja, uma forma de criar páginas esteticamente agradáveis aos usuários. Ele conta ainda com componentes e plugins já prontos para você utilizar em seus projetos, o que faz com que você ganhe muita produtividade na hora de desenvolver.
Você pode adaptar o modelo-base do Bootstrap para atender às necessidades do seu projeto.

framework Bootstrap

As APIs do Bootstrap são tão poderosas e flexíveis que você tem total liberdade para personalizar os componentes da maneira como desejar com um mínimo de esforço. Nas figuras abaixo, temos exemplos de componentes do Bootstrap que foram livremente personalizados.

Componentes do Bootstrap

Com o Bootstrap, você também não precisa se preocupar se seu site funcionará bem em todas as diferentes resoluções de dispositivos: o Bootstrap já contém componentes responsíveis, já diminuindo consideravelmente o esforço envolvido na criação de interfaces plenamente responsivas.

Vantagens e desvantagens

Algumas vantagens e algumas desvantagens podem ser destacadas com relação a este framework.

Vantagens:
  • Responsividade: possui um sistema de layout 100% responsivo, capaz de manter a página completamente responsiva em diferentes dispositivos e resoluções;
  • Extensa biblioteca de componentes: possui um conjunto de componentes extenso, como ícones, painéis etc.;
  • Documentação: possui uma documentação bem completa e acessível;
  • Reuso de código: Como o Bootstrap entrega uma gama muito grande de componentes pré-prontos, se torna muito mais fácil lidar com questões como reusabilidade de código.
Desvantagens
  • Excesso de padronização: como a gama dos componentes pré-prontos é extensa e atende a praticamente todos os cenários no que diz respeito ao desenvolvimento de páginas web responsivas, as diferentes aplicações podem acabar ficando “com a mesma cara”. Porém, sua customização é bastante simples.
Bootstrap 4 - Fundamentos
Curso de Bootstrap 4 - Fundamentos
CONHEÇA O CURSO

Como aprender sobre o Bootstrap?

O Bootstrap é muito simples para aprender e customizar. Além da documentação oficial, temos os nossos cursos de Bootstrap, que acabaram de ser atualizados. Então, vale a pena dar uma conferida 🙂

Se você é um desenvolvedor front-end ou deseja seguir essa carreira, é interessante colocar o Bootstrap em seu plano de estudos. Ele irá te auxiliar muito no desenvolvimento de seus sites, fazendo-o ter muita produtividade. Você também pode utilizá-lo com outras ferramentas atuais do mercado como o Angular e o React.

Quando falamos de frameworks de componentes visuais, o Bootstrap não é o único no mercado. Alguns de seus concorrentes diretos são o Materialize e o Foundation. Porém, a simplificação e a baixa curva de aprendizagem ainda fazem o Bootstrap ser um dos frameworks mais adotados pelo mercado.

O que é o Angular e para que serve?

Frameworks SPA atualmente são um padrão de mercado quando falamos sobre desenvolvimento front-end. Neste artigo, vamos abordar um dos mais populares frameworks JavaScript da atualidade: o Angular.

Afinal, o que é o Angular?

É um framework JavaScript de código aberto mantido pela Google para a construção de SPA (sigla para Single Page Applications ou Aplicações de Página Única). Resumidamente, uma SPA é basicamente uma aplicação web construída em uma só página, na qual a interação e a navegação entre as sessões de uma página ocorrem de maneira a qual não é necessário recarregar a página em cada uma dessas mudanças.

Sua finalidade é nos dar ferramentas necessárias para criação de aplicações SPA, além disso também deixa o desenvolvimento deste tipo de aplicação mais simples e otimizado. Com ele, podemos desenvolver aplicações web voltadas tanto para resoluções desktop quanto para resoluções mobile, tornando-as dinâmicas, modernas e escaláveis.

Com o Angular, temos um novo paradigma de desenvolvimento focado nos dados da aplicação. Ele não utiliza uma virtualização do DOM para manipulá-lo: ele utiliza mecanismos próprios de detecção de alterações na interface, alterações tas disparadas principalmente por uma estrutura chamada Two-Way Data Binding.

O Two-Way Data Binding mantém o model e a view sempre atualizados entre si, ou seja: sempre que algum model é atualizado, essa alteração se reflete automaticamente na view.

AngularJS ou somente Angular?

Provavelmente, você já ouviu falar de Angular e AngularJS e pode ter ficado em dúvida se é a mesma tecnologia, porque que uma tem “JS” no nome e a outra não. A resposta é: embora o Angular seja a evolução após o AngularJS, eles praticamente são frameworks diferentes.

O AngularJS começou em 2009, sendo definido pelas versões 1.x. Já o Angular (antes conhecido como “Angular 2”, publicado em 2016) é considerado a versão 2 mais as versões superiores. Muitos pensam que o Angular é uma continuação do AngularJS em termos de código, o que não é verdade.

A versão 2, chamada hoje somente de Angular, foi uma reescrita completa do código e tornou-se uma arquitetura completamente diferente, mantendo apenas o nome – porém sem o JS no final. Nesta nova ferramenta, foram seguidos padrões da web moderna, técnicas e boas práticas que foram aprendidas com os erros cometidos no desenvolvimento da ferramenta anterior.

O AngularJS tinha como linguagem padrão o JavaScript. Já o Angular ainda continua baseado no JavaScript, mas através do TypeScript. Com isso, ele passou a oferecer capacidades interessantes antes oferecidas somente pelo TypeScript.

Características

Suas principais características são:

Suporte cross-platform: esse framework fornece suporte a múltiplas plataformas de desenvolvimento. O Angular pode ser utilizado para criar aplicações web SPA, aplicações mobile (com o suporte do Ionic, por exemplo) ou até mesmo aplicações desktop (com o suporte do Electron).

Mesmo em ambientes distintos, a API do Angular permanece praticamente a mesma, o que facilita a curvatura de adoção e aprendizagem em múltiplos ambientes de desenvolvimento;

Integração e suporte à todas as fases de desenvolvimento: provê ferramental e suporte para todas as fases de desenvolvimento, desde a escrita do código em si (apoiando-se bastante na API e no sistema de tipos do TypeScript) até a criação de fluxos de teste (com o apoio principalmente do Karma – uma biblioteca para escrita de testes JavaScript), passando pelo suporte excelente à criação de animações, o provisionamento de estruturas de acessibilidade e até mesmo o scaffolding de projetos através do Angular CLI;

Produtividade aliada à performance: consegue oferecer suporte ao desenvolvimento rápido de aplicações através de uma API simples, bem estruturada e bem documentada, o que acaba trazendo bastante produtividade.

Por fim, por mais que o Angular não utilize o conceito de Virtual DOM (conceito utilizado por outros frameworks, como o React), ainda sim o Angular oferece uma performance bem interessante, principalmente com a Ivy, a engine de renderização utilizada desde o Angular 6+.

Mercado

Atualmente o Angular é um dos frameworks Javascript que dominam o mercado, sendo muito popular nos últimos anos e é utilizado em inúmeros projetos. Por esses motivos, ele vem sendo amplamente requisitado no mercado para desenvolvimento web e mobile, tendo diversas oportunidades no Brasil e no mundo.

Através de uma pesquisa feito pelo Stack Overflow neste ano (2020), ao focar em estruturas web, vemos que ele é muito popular. Apesar de o jQuery estar em primeiro, ele está lentamente perdendo espaço para o React.js e o Angular, ano após ano.

pesquisa-stackoverflow-angular

Com uma rápida pesquisa também podemos ver o número de vagas que requisitam o conhecimento em Angular. Abaixo podemos ver vagas pesquisadas no LinkedIn e InfoJobs. Vale ressaltar as vagas home office.

vagas angular LinkedIn

vagas angular InfoJobs

Desenvolvedor Angular Júnior
Formação: Desenvolvedor Angular Júnior
O Angular é utilizado por várias empresas em soluções de larga escala.Nesta formação vamos conhecer os fundamentos do Angular, como iniciar um projeto, o que são componentes e a trabalhar com o Angular CLI.
CONHEÇA A FORMAÇÃO

O que preciso saber para iniciar com essa tecnologia?

Existe muito conteúdo de suporte para o Angular, que conta com uma comunidade grande, ativa e disposta a ajudar.

Se você tem interesse de aprender ou se aperfeiçoar mais nas funcionalidades, conceitos e até mesmo desenvolver um projeto para entender como estruturar uma aplicação web moderna e rápida, temos uma formação específica para você iniciar do zero 🙂

O que é Template Engine?

Quando estamos desenvolvendo uma aplicação web, é comum que queiramos exibir determinados dados obtidos de alguma fonte (seja um banco de dados, uma API, uma lista, etc). Para essa exibição, normalmente utilizamos de páginas HTML para que sejam renderizadas no navegador.

Porém, a criação de páginas HTML é, muitas vezes, algo improdutivo e ineficiente, principalmente quando precisamos trabalhar com grandes quantidades de dados ou até utilizar recursos das linguagens de programação (for, if, case, etc) nas páginas HTML. Para estes casos, podemos utilizar as template engines (ou view engines).

Basicamente, uma template engine serve para facilitar a criação de páginas HTML e tornar o envio e exibição de informações para estas páginas um processo mais simples e organizado.

Exemplo

Por padrão, o PHP possui uma forma de executar código em páginas HTML. Porém, este processo não é dos mais eficientes e legíveis do mercado. Imagine que você queira verificar se existe algum usuário logado na página e, caso positivo, exibir o nome deste usuário.

No PHP, este código ficaria da seguinte forma:

<?php if ($user->isLogged()): ?> 
Welcome back, <strong><?= $user->name; ?></strong> 
<?php endif; ?>

Utilizando uma template engine (como o Blade, template engine padrão do Laravel), este mesmo código poderia ser escrito da seguinte forma:

@if ($user->isLogged()) 
Welcome back, <strong>{{ $user->name }}</strong> 
@endif

É simples perceber a legibilidade de um código em comparação com o outro. Com o Blade, o uso de estruturas de condição é mais simples e legível, quando comparado ao PHP puro.

Symfony - Template Engine Twig
Curso de Symfony - Template Engine Twig
CONHEÇA O CURSO

Algumas vantagens

Com o uso das template engines, conseguimos identificar diversas vantagens quando comparados ao uso de HTML puro:

  • Maior velocidade na criação de templates;
  • Melhor reaproveitamento de código HTML;
  • Uso de tipos de dados nativos em páginas HTML;
  • Uso de recursos das linguagens de programação em páginas HTML (estruturas de condição, repetição, etc), entre outros.

Como funciona uma Template Engine?

Como sabemos, o navegador só consegue “ler” informações em HTML e renderizá-las para o usuário. Por isso, as template engines “traduzem” o conteúdo dos seus templates para código HTML puro os envia para o navegador. É este processo que permite que uma template engine exista, já que de nada adiantaria se as páginas retornadas por ela não pudessem ser lidas pelos navegadores.

Basicamente, o processo da criação de páginas pelas template engines se dá da seguinte forma:

Um template é criado (como o exemplo abaixo em Jinja2, um dos principais template engines do ecossistema Python):

<title>{% block title %}{% endblock %}</title>
<ul>
{% for user in users %}
  <li><a href="{{ user.url }}">{{ user.username }}</a></li>
{% endfor %}
</ul>

Este template é “traduzido” para código HTML e enviado para o navegador.

Principais template engines do mercado

No mercado existem diversos template engines. Os principais deles são:

No PHP:

  • Plates;
  • Blade;
  • Twig, entre outros.

No JavaScript:

  • Mustache;
  • Handlebars;
  • doT;
  • EJS;
  • PUG;
  • Jade Language;
  • Squirrelly, entre outros.

No Python:

  • Django Template;
  • Genshi;
  • Jinja;
  • Mako, entre outros.

No Java:

  • Java Server Pages (JSP);
  • Thymeleaf;
  • FreeMarker, entre outros.

Então, podemos concluir…

O uso de template engines facilita a criação da camada de visualização de dados em uma aplicação. Com eles podemos utilizar recursos das linguagens de desenvolvimento para criar páginas HTML, como, estrutura de condição, de repetição, herança, etc.

Autowiring em Container de Injeção de Dependência

No artigo Entendendo Injeção de Dependência vimos sobre o que é injeção de dependência, seu funcionamento e como se dá a sua aplicação. No artigo Container De Injeção De Dependência (DI Container) vimos como funciona um container para gerenciar o mapa de dependências.

Nesse artigo veremos uma funcionalidade relativamente comum nos containers de dependência de frameworks que é a habilidade de resolver as dependências de um construtor (principalmente) automaticamente, chamada de autowiring.

No artigo Container De Injeção De Dependência (DI Container) implementamos um protótipo (simples, porém funcional) de um container e, em determinado momento, chegamos nesse tipo de caso de uso:

$indexController = new IndexController(
    $container->get('user.repository')
);

$userController = new UserController(
    $container->get('user.repository')
);

$registerController = new RegisterController(
    $container->get('user.repository')
);

Alguns controladores precisavam receber a instância de UserRepository e tivemos que manualmente passá-la para cada um deles. Agora, imagine se cada um desses controladores tivesse que receber outras dependências? Nenhum problema, só que ficaria meio chato e improdutivo ter que ficar repetindo essas construções na instanciação deles, concorda?

E se desenvolvermos uma forma do nosso container automaticamente resolver essas dependências? Desse modo, tudo o que faríamos seria pedir para o Container uma instância desses controladores, sem a necessidade de nos preocuparmos em passar manualmente para o construtor de cada um deles as suas dependências. Teríamos como resultado um código assim:

$indexController = $container->get(IndexController::class);

$userController = $container->get(UserController::class);

$registerController = $container->get(RegisterController::class);

Estamos pedindo as instâncias desses controladores sem nos preocuparmos em alimentá-los de suas dependências, deixamos esse trabalho para o Container.

Symfony - Fundamentos
Curso de Symfony - Fundamentos
CONHEÇA O CURSO

Estrutura inicial do projeto

Vamos criar o protótipo de uma aplicação para que possamos testar a nossa implementação de Container. A nossa aplicação terá essa estrutura:

- [blog-artigo-di]
- - - [app]
- - - - [Http]
- - - - - - [Controller]
- - - - - - - UserController.php
- - - - [Repositories]
- - - - - LeadRepository.php
- - - - - TagRepository.php
- - - - - UserRepository.php
- - - Container.php
- index.php

O repositório dessa estrutura no GitHub você encontra clicando aqui. Se desejar, você pode fazer download direto dela clicando nesse link: sem-autowiring.zip

Depois de baixar e colocar no local onde normalmente você executa seus projetos, basta que você execute composer install pois o projeto faz uso da PSR-4 para autoloading:

$ ~/D/w/blog-artigo-di> composer install

O nosso Container atualmente possui uma implementação simples e que ainda não suporta a resolução automática de dependências. Abra app/Container.php:

<?php
declare(strict_types=1);

namespace App;

use Closure;

final class Container
{
    private $instances = [];

    public function set(string $id, Closure $closure) : void
    {
        $this->instances[$id] = $closure;
    }

    public function get(string $id) : object
    {
        return $this->instances[$id]($this);
    }

    public function singleton(string $id, Closure $closure) : void
    {
        $this->instances[$id] = function () use ($closure) {
            static $resolvedInstance;

            if (null !== $resolvedInstance) {
                $resolvedInstance = $closure($this);
            }

            return $resolvedInstance;
        };
    }
}

Esse container já foi explicado na indicação de leitura no início desse artigo. Portanto, não vamos entrar novamente em seus pormenores.

O arquivo index.php na raiz do projeto é o responsável pelo bootstrap da nossa aplicação protótipo:

<?php

// Carrega o autoload do Composer
require './vendor/autoload.php';

use App\Repositories\TagRepository;
use App\Repositories\LeadRepository;
use App\Repositories\UserRepository;
use App\Http\Controller\UserController;

// Instancia o container
$container = new App\Container();

// Adiciona referências ao container
$container->set(TagRepository::class, function() {
    return new TagRepository();
});

$container->set(LeadRepository::class, function() {
    return new LeadRepository();
});

$container->set(UserRepository::class, function() {
    return new UserRepository();
});

// Instancia o UserController passando para ele as dependências necessárias
$userController = new UserController(
    $container->get(TagRepository::class),
    $container->get(UserRepository::class),
    $container->get(LeadRepository::class)
);

$userController->index();

Para testar o exemplo, na raiz do projeto execute:

$ ~/D/w/blog-artigo-di> php -S localhost:8000

Isso executará o servidor embutido do PHP em cima da raiz do nosso projeto, permitindo que o acessemos pelo navegador através da URL: http://localhost:8000/

O resultado será:

/Users/kennedytedesco/Documents/www/blog-artigo-di/app/Http/Controller/UserController.php:31:
array (size=2)
  'id' => int 1
  'name' => string 'tag' (length=3)

/Users/kennedytedesco/Documents/www/blog-artigo-di/app/Http/Controller/UserController.php:31:
array (size=2)
  'id' => int 2
  'name' => string 'user' (length=4)

/Users/kennedytedesco/Documents/www/blog-artigo-di/app/Http/Controller/UserController.php:31:
array (size=2)
  'id' => int 3
  'name' => string 'lead' (length=4)

Indica que o método index() do UserController foi executado com sucesso. Ou seja, as dependências, os repositórios necessários para o funcionamento dessa classe foram injetados com sucesso. Até aqui tudo bem, ademais, injetamos tais dependências manualmente:

$userController = new UserController(
    $container->get(TagRepository::class),
    $container->get(UserRepository::class),
    $container->get(LeadRepository::class)
);

Implementando a resolução automática de dependências

Para que possamos implementar a resolução automática das dependências utilizaremos a API de reflexão do PHP. Essa API nos fornece meios para que façamos engenharia reversa nas classes, extraindo muitas de suas informações internas como quantos métodos possui, quais são públicos, protegidos ou privados, se implementa um construtor, quais são os parâmetros do construtor, se são opcionais ou exigidos, entre outras informações.

Dessa forma, se o usuário pedir para o Container a instanciação do UserController:

$userController = $container->get(UserController::class);

Que tal a gente usar reflexão para obter quais dependências (classes) ele necessita para ser instanciado e então resolver essas dependências automaticamente usando o próprio Container e retornar a instância dele?

É exatamente isso que a nossa implementação de autowiring fará. Para tanto, começaremos alterando o código do nosso container app\Container.php para:

<?php
declare(strict_types=1);

namespace App;

use Closure;
use ReflectionClass;
use ReflectionParameter;

final class Container
{
    private $instances = [];

    public function set(string $id, Closure $closure) : void
    {
        $this->instances[$id] = $closure;
    }

    public function get(string $id) : object
    {
        // Se essa referência existe no mapa do container, então a retorna diretamente.
        if ($this->has($id)) {
            return $this->instances[$id]($this);
        }

        // Se a referência não existe no container, então foi passado uma classe para ser instanciada
        // Façamos então a reflexão dela para obter os parâmetros do método construtor
        $reflector = new ReflectionClass($id);
        $constructor = $reflector->getConstructor();

        // Se a classe não implementa um método construtor, então vamos apenas retornar uma instância dela.
        if (null === $constructor) {
            return new $id();
        }

        // Itera sobre os parâmetros do construtor para realizar a resolução das dependências que ele exige.
        // O método "newInstanceArgs()" cria uma nova instância da classe usando os novos argumentos passados.
        // Usamos "array_map()" para iterar os parâmetros atuais, resolvê-los junto ao container e retornar um array das instâncias já resolvidas pelo container.
        return $reflector->newInstanceArgs(array_map(
            function (ReflectionParameter $dependency) {
                // Busca no container a referência da classe desse parâmetro
                return $this->get(
                    $dependency->getClass()->getName()
                );
            },
            $constructor->getParameters()
        ));
    }

    public function singleton(string $id, Closure $closure) : void
    {
        $this->instances[$id] = function () use ($closure) {
            static $resolvedInstance;

            if (null !== $resolvedInstance) {
                $resolvedInstance = $closure($this);
            }

            return $resolvedInstance;
        };
    }

    public function has(string $id) : bool
    {
        return isset($this->instances[$id]);
    }
}

(Através do GitHub você pode visualizar o que foi adicionado/removido. Basta visualizar esse commit aqui).

A partir do momento que o nosso Container consegue resolver as dependências automaticamente, podemos alterar no index.php a forma de instanciar, que era uma instanciação direta da classe usando new UserController:

$userController = new UserController(
    $container->get(TagRepository::class),
    $container->get(UserRepository::class),
    $container->get(LeadRepository::class)
);

Para uma instanciação que usa o Container (para que ele possa resolver as dependências para nós):

$userController = $container->get(UserController::class);
$userController->index();

(O código completo do exemplo com autowiring encontra-se no branch master do repositório desse exemplo).

Você pode testar o exemplo e terá o mesmo resultado obtido anteriormente quando não usávamos autowiring. O UserController continuará sendo instanciado com sucesso.

Laravel - Framework PHP (Parte 3/3)
Curso de Laravel - Framework PHP (Parte 3/3)
CONHEÇA O CURSO

Concluindo

Vimos nesse artigo a fundação sobre como a resolução automática de dependências é feita nos containers de injeção de dependência. É por esse caminho que Symfony, Laravel entre outros frameworks (inclusive de outras linguagens) fazem. Obviamente o nosso Container é simples, didático e bem direto ao ponto, não estando 100% pronto para uso em projetos reais. Algumas verificações de segurança (se a classe existe, senão lançar uma exceção etc) precisariam ser implementadas. Na realidade, existem boas implementações de containers por aí e, se você usa um Web Framework, não vai precisar criar a sua própria. No entanto, saber como funciona, é essencial. Essa foi a intenção desse artigo.

Até a próxima!

Os principais Frameworks PHP

De maneira mais simples e objetiva, um Framework é um conjunto de funcionalidades que auxiliam o desenvolvedor a criar aplicações de forma mais rápida.

Caso você ainda não saiba para que serve um framework, aqui no blog possuímos um artigo bem legal que, sem dúvidas, irá te auxiliar no entendimento.

Desta forma, neste artigo falaremos brevemente sobre os principais Frameworks PHP.

Desenvolvedor Laravel Full-Stack
Formação: Desenvolvedor Laravel Full-Stack
Nesta formação você aprenderá desenvolver aplicações PHP usando o framework Laravel com maestria. Ao final desta formação, você terá condições de trabalhar em grandes aplicações web ou APIs integradas com diversos serviços, tudo isso utilizando as melhores práticas do mercado.
CONHEÇA A FORMAÇÃO

Laravel

Framework open source, o Laravel é, sem dúvidas, um dos mais utilizados atualmente. Desenvolvido por Taylor B. Otwell sobre a licença MIT, o Laravel possui seu código hospedado no GitHub e é um framework para os apreciadores de um código bonito, como diz seu slogan: “The PHP Framework For Web Artisans”.

Por possuir uma sintaxe simples e clara, permite que o desenvolvedor trabalhe de maneira mais rápida e extremamente estruturada. Possui uma imensa comunidade ativa, o que o torna ainda mais aceito no mercado.

Utiliza o padrão arquitetural MVC, que divide a aplicação em três camadas distintas, sendo elas o Model, View e Controller, onde:

  • Model: determina as entidades do projeto, ou seja, quais tabelas serão mapeadas;

  • View: camada responsável por exibir informações ao usuário, normalmente páginas HTML;

  • Controller: camada que faz o “meio de campo” entre a view e o model, ou seja, obtém a requisição que o usuário realiza, busca os dados através do model e retorna à view.

Em seu site (https://laravel.com/) é possível encontrar toda sua documentação, novidades do framework (Podcats, blog, tutoriais..), parceiros e muito mais.

CodeIgniter 3 - Framework PHP
Curso de CodeIgniter 3 - Framework PHP
CONHEÇA O CURSO

CodeIgniter

Com sua primeira versão pública lançada em 2006, o CodeIgniter é um excelente framework para desenvolvimento de aplicações PHP que exijam mais rapidez em seu desenvolvimento.

Assim como dito em seu site, fornece um conjunto de ferramentas simples e elegantes para criar aplicativos web com recursos completos. De código open source e extremamente leve e rápido, é um framework ideal para desenvolvedores iniciantes, por possuir a simplicidade atrelada ao desenvolvimento.

Em seu site (https://codeigniter.com/) é possível encontrar toda documentação necessária para sua utilização, além de links para canais de comunicação entre a comunidade.

Symfony - Fundamentos
Curso de Symfony - Fundamentos
CONHEÇA O CURSO

Symfony

Framework Open source, o Symfony é ideal para construção de aplicações mais robustas por oferecer ao desenvolvedor total controle de suas configurações. Lançado em 2005, é um framework criado sobre o conceito de aprendizagem rápida sobre os componentes do Symfony.

Utiliza também paradigma MVC e uma comunidade ativa em mais de 120 países (Como informado em seu site).

Em seu site (https://symfony.com/), você poderá encontrar mais informações sobre sua documentação, comunidade, realizar seu download e ficar por dentro de todas as novidades acerca deste framework.

Zend Expressive - Microframework PHP
Curso de Zend Expressive - Microframework PHP
CONHEÇA O CURSO

Zend

Lançado em 2005, o Zend é um Framework orientado a objetos de código aberto que permite que o desenvolvedor faça a reutilização de seus componentes. De fácil escrita, implementar códigos mais complexos com o Zend torna-se algo mais acessível.

Possui uma comunidade extremamente ativa e certificação oficial aceita no mercado que, por sinal, é um grande diferencial por ser um framework utilizado por grandes empresas.

Em seu site (http://www.zend.com/) é possível realizar o download do framework, além de encontrar toda sua documentação e tudo sobre sua certificação.

CakePHP

O CakePHP é um framework que possibilita a criação de aplicações robustas por programadores de todos os níveis, sem perder sua flexibilidade. É um framework sobre a licença MIT perfeito para aplicações de uso comercial.

Assim como informado em seu site, oferece uma camada flexível de acesso ao banco de dados e torna a construção de sistemas pequenos e complexos muito mais simples.

Em seu site (https://cakephp.org/), além de se “deliciar” com uma página extremamente fofíssima, para os amantes de bolinhos <3, é possível realizar o download da ferramenta, encontrar sua documentação, sua comunidade e uma loja online de produtos do Framework, com camisetas e lindíssimos elefantinhos (os CakePHP ElePHPant).

Concluindo:

O uso de Frameworks, sem dúvidas, caiu no gosto popular de diversos desenvolvedores, pois permite a criação de aplicações mais profissionais em um tempo muito menor de desenvolvimento, quando comparado ao uso da linguagem “pura”, ou seja, sem framework algum.

E você? Utiliza algum Framework? Conte pra gente sua experiência e até o próximo artigo! =)

Para que serve um framework?

A utilização de frameworks já está inclusa no dia a dia de muitos desenvolvedores. O principal benefício que faz muitos desenvolvedores utilizarem frameworks é o poder de reutilização de estruturas de código, poupando horas de desenvolvimento e fazendo com que os desenvolvedores possam focar no que é de fato importante e que agrega valor ao negócio com relação ao software que está sendo desenvolvido.

Laravel - Framework PHP (Parte 1/3)
Curso de Laravel - Framework PHP (Parte 1/3)
CONHEÇA O CURSO

O que vem a ser um framework?

Um framework é uma estrutura-base que contém um conjunto de funções e componentes pré-definidos, funções e componentes estes que se relacionam para disponibilizar funcionalidades específicas ao desenvolvimento de software. Estas funções e componentes genéricos pré-prontos agilizam o processo, poupam tempo e evitam retrabalho para o desenvolvedor.

Os frameworks podem ser criados ou pela própria comunidade ou por empresas mantenedoras de uma linguagem ou ambiente de desenvolvimento, como a Microsoft e a Oracle.

Por que utilizar um framework?

O foco principal de um framework é a reusabilidade. Você pode utilizar um framework para desenvolver várias aplicações, reaproveitando estas estruturas pré-disponibilizadas para lidar com tarefas repetitivas ou que são comuns em vários tipos de sistemas (como, por exemplo, a funcionalidade de autenticação). Nesse exemplo, você não precisa dedicar tempo para desenvolver a funcionalidade de login, já que existem frameworks já testados para essa finalidade. Além disso, se necessário, você pode personalizar estes componentes pré-disponibilizados de acordo com as demandas do projeto em questão.

Um exemplo: a Microsoft tem o .NET Framework, que disponibiliza componentes pré-configurados para rodar aplicativos em diferentes plataformas. Se você vai criar uma aplicação web, por exemplo, você não precisa desenvolver toda a estrutura necessária para lidar com requisições HTTP (que é uma tarefa repetitiva): basta você criar uma classe que estenda a clases Controller e… Pronto! Você já tem automaticamente uma classe que consegue lidar com requisições HTTP.

Bootstrap 4 - Básico
Curso de Bootstrap 4 - Básico
CONHEÇA O CURSO

Existem diversos frameworks para as mais diferentes linguagens e plataformas, seja desktop, web ou mobile, tanto com relação ao front-end quanto ao back-end. Devemos escolher os frameworks corretos para cada tipo da aplicação, para que ele realmente ajude no objetivo final.

Ao final, podemos concluir que um framework é um facilitador para o desenvolvedor chegar no resultado final que ele deseja – que é o desenvolvimento de uma aplicação, poupando tempo e esforço de desenvolvimento.

© 2004 - 2019 TreinaWeb Tecnologia LTDA - CNPJ: 06.156.637/0001-58 Av. Paulista, 1765, Conj 71 e 72 - Bela Vista - São Paulo - SP - 01311-200