TiloWR » HTML

ASP.NET MVC View Engines: WebForms, NHaml, Spark e Razor!

willian — Mon, 28 Feb 2011 09:30:10 +0000

Desde meu primeiro contato com desenvolvimento web, sempre utilizei tecnologias Microsoft. Lá em 2001 comecei a mexer com ASP3 e em 2004 comecei a trabalhar profissionalmente, já com ASP.NET. Desde o ASP3, as coisas não mudaram muito no que se refere ao HTML, a tecnologia avançou e mudou muito do lado do servidor, mas HTML sempre foi tratado da mesma forma.

Com a popularização dos frameworks MVC, uma nova abordagem veio em relação ao HTML, já que cada parte do MVC (Model, View, Controller) pode funcionar e agir da forma que for concebido no framework.

Um padrão que apareceu em relação a View, é que o HTML dela é gerado por meio de View Engines. Ou seja, você não usa mais HTML e sim uma estrutura que gera HTML.

Isso pode as vezes não estar claro na mente do desenvolvedor. Afinal, ao olhar uma View do ASP.NET MVC, o que está ali é basicamente HTML, salvo algumas marcações de código da Model, como era no ASP3.

Primeiramente é esse tipo de visão que precisa ser removido de sua cabeça. Aquilo não é HTML, é uma View Engine, mesmo que muitas delas utilizem HTML junto. A View Engine padrão utilizada pelo ASP.NET MVC é a WebForms (NÃO confundir com o ASP.NET Web Forms), que é basicamente a mesma do ASP3, porém com algumas coisas novas.

O que ajudará a entender como uma View Engine funciona é compará-las.

No caso do ASP.NET MVC, 4 View Engines se tornaram mais populares, ou por serem padrão e bem conhecidas, ou por mostrarem bons recursos de utilização. São elas:

WebForms - é a View Engine padrão do ASP.NET MVC e também a mais antiga. Existe desde 1996 quando veio com o ASP3 e desde lá não mudou muita coisa. Vejamos um exemplo do uso do WebForms:

Créditos: Channel 9

Podemos perceber que a principal característica do WebForms é a delimitação do trecho de código com <% e %>, o que é uma vantagem, já que fica bem visível onde começa e acaba HTML e código. Porém, dependendo da complexidade da vier, temos muita coisa escrita na página, muitos <% e %> abrindo e fechando sessões de código o tempo todo.

NHaml - O Haml é um padrão fortemente adotado no Framework Rails, que foi portado pra ASP.NET MVC na forma do NHaml.

A abordagem dele é bem interessante, já que nele você NÃO USA HTML. Ele é composto de marcações próprias que no final gerarão o código HTML. Vejamos o exemplo anterior agora em NHaml:

Créditos: Channel 9

Uma desvantagem do NHaml é que o projeto, apesar de open-source, não é muito ativo, tanto que ainda não temos NHaml compatível com o ASP.NET MVC 3. Algumas outras coisas dele não são tão “elegantes”, se o compararmos com as outras View Engines. Porém, se a idéia de não usar HTML e testar algo novo (desde que você não use MVC3) for interessante. Não perca tempo e experimente!

Spark - Essa é uma View Engine muito interessante e basicamente é o inverso do Nhaml. Enquanto no NHaml você não tem nenhum HTML, no Spark você trabalha dentro do HTML. As marcações do Spark são feitas dentro das tags HTML:

Créditos: Channel 9

Outra vantagem é que o projeto Spark é bem ativo e sempre o estão atualizando. Ele também já é compatível com ASP.NET MVC 3.

Além disso, o Spark fornece recursos próprio que ajudam na geração de código nas Views. Por meio de configurações você consegue criar tas próprias que irão gerar trechos específicos de HTML. É algo semelhante aos Helpers do MVC, porém você o escreve como se fosse uma tag HTML.

Se você tem vontade de testar algo novo e fora do universo Microsoft (Spark também é open-source), eu recomendo o Spark.

Razor - Deixado por último, porém não menos importante, o Razor é a View Engine mais nova de todas (2011) e vem junto com o ASP.NET MVC 3. Ou seja, ao criar uma View, você terá como opções de View Engine o WebForms e o Razor. Mas qual a idéia por trás do Razor?

Basicamente, a Microsoft resolveu atualizar o que vinha igual desde 1996, porém sem substituir o já tão conhecido WebForms. Você tem ele lá, porém tem uma outra View Engine mais fluida e prática pra experimentar, e essa, eu recomendo fortemente!

Fluidez, esse é o adjetivo que vem a mente ao ver uma View utilizando Razor. Reparem:

Créditos: Channel 9

Diferente do WebForms (que separa bem código e HTML), do NHaml (que não possui HTML) e do Spark (que coloca o código dentro das tas HTML), o Razor é fluido, o html e o código “conversam” de forma simples e direta. Isso pode ser visto de forma negativa, já que em uma View mais complexa, fica um tanto estranho perceber onde começa e acabam instruções e HTML. Porém, com o tempo isso deixa de ser um empecilho e no final passa a ser mais interessante desenvolver assim. Mas é questão de gosto, e de experimentar uma abordagem nova também.

Acho estranho alguns desenvolveres criticarem o Razor, pois quando chegou o ASP.NET MVC, a primeira crítica foi de ele usar WebForms nas Views.

Acho que o interessante, ao invés de pensar que as View Engines estão aí pra competir, deve-se pensar que elas estão aí pra te dar novas opções de desenvolver suas Views em MVC, ainda mais agora que esse padrão está virando uma realidade também dentro do mundo Microsoft.

Por enquanto é isso. Experimentem e digam aí nos comentários quais você mais gostou. Quem já usou View Engines em outras tecnologias (PHP, Rails, Django) também está convidado a participar! Até o próximo post e bom desenvolvimento!

Otimizando desenvolvimento HTML com Zen-coding e Notepad++ ( Instalação + Dica )

Tilo — Thu, 13 Jan 2011 17:00:43 +0000

Nunca recebi um projeto acompanhado da seguinte frase, “Projeto tranqüilo, vai fazendo de boa”, eles sempre chegam com data de entrega para ontem, e uma boa é saber como otimizar o seu tempo, ainda mais se seu foco é a qualidade, todos sabemos que projetos simples, não significa projeto fácil. então, ai vai uma dica muito valiosa:

Notepad++ acompanhado do plugin do Zen-condig, vou fazer as honras, o notepad++ é um editor de texto extremamente simples e funcional para quem vai construir código, uso ele para varias linguagens, mas vamos focar no assunto que é html. o notepad++ pode ser baixado aqui

A idéia do Zencoding é bem simples, ao invés de você digitar:

Você poderá digitar apenas html:5 e apertar CTRL+E e pronto ele já expande o código pra você.

Se seu você precisar montar o seguinte código:

Basta digitar div#geral>nav.menu>ul>li*5 e apertar CTRL+E.

Aqui vai um video bem legal de como utilizar o zencoding

Algumas coisas legais pra se testar no Zen-coding:

E - Nome do elemento (div, p);
E#id - Elemento com identificador (div#content, p#intro, span#error);
E.class - Elemento com classes (div.header, p.error.critial). Você pode combinar classes e IDs, também: div#content.column.width;
E>N - Elemento filho (div>p, div#footer>p>span);
E+N - Elemento em sequência (h1+p, div#header+div#content+div#footer);
E*N - Multiplicação de elementos (ul#nav>li*5>a);
E$*N - Numeração de itens (ul#nav>li.item-$*5);

A instalação do Zencoding pode ser feita de 2 formas via Plugin manager do notepad++ ou da forma roots de ser uhauhauh

Vamos fazer primeira pelo Plugin manager:

Abra o Notepad > Plugins > Plugins Manager > Show Plugin Manager

Selecione a aba Available e marque a opção Zen Coding

Depois da Instalação é só aceitar a solicitação de reinicializar o Notepad e pronto

Agora vamos a forma Root de ser:

Acesse o repositório do Zen-coding e decopacte o conteudo do zip dentro da pasta plugin do notepad

Se programação fosse religião, qual seria a sua?

Tilo — Wed, 27 Jan 2010 16:17:10 +0000

A revista “Metal Hamer” começou uma campanha na internet para transformar o heavy metal em religião, no Reino Unido. Segundo a campanha, os fãs do gênero musical devem escrever “heavy metal” na opção de religião do censo 2011. Segundo informações, o músico Ozzy Osbourne estaria apoiando o movimento. Essa não é a primeira campanha no tipo no país. Em 2001, mais de 400 mil britânicos fanáticos pela sequência de filmes “Star Wars” declararam “jedi” como sua opção religiosa.

e se programação regesse qual a sua religião, qual seria a sua?

C seria o Judaísmo – É antigo e restritivo, mas a maioria do mundo está familiarizado com suas leis e as respeitam, como os dez mandamentos.Seus patriarcas ,os sistemas operacionais,são mundialmente conhecidos.Contudo a questão é: você não pode se converter a ela— tem que estar nela desde o começo— ou que pensará que é insanidade .As pessoas também tem por costume culpá-la pelos problemas do mundo.

Java seria o Cristianismo tradicional— É teoricamente baseado no C, porém evita tantas antigas leis dele você não se sente no Judaísmo de jeito nenhum. Além disto, acrescenta seu próprio conjunto de leis rígidas que seus seguidores consideram de longe superior ao original. E não estão apenas certos de que esta é a melhor linguagem do mundo, mas tem vontade de queimar todos àqueles que a criticam,tudo em nome do seu deus ,o Framework.

PHP seria o Catolicismo não praticante – Luta com Java por fiéis no mercado da Web. Toma uns poucos conceitos do C e do próprio Java, porém apenas aqueles que este realmente gosta como as quermesses.Talvez não seja tão coerente quanto outras linguagens mas pelo menos lhe deixa um sentimento de liberdade e um maior conforto com suas leis e a idéia central da doutrina.Também o conceito de goto inferno foi abandonado inteiramente.

C++ seria o Islamismo—Além de ter todas as leis do C coloca acima destas um conjunto complexo de regras novas.É tão versátil que pode ser usado para fazer várias coisas desde atentados terroristas até belas obras de arte.Seus adeptos estão convencidos de que esta é a última linguagem universal e se irritam com aqueles que discordam deste fato.Ademais se um infiel insultar seu profeta Bjarne Stroustrup muito provavelmente um seguidor radical irá ameaçá-lo de morte .

C# seria o Mormonismo— A primeira vista é a mesma coisa que Java. Porém com uma olhada mais profunda você percebe que ele é controlado por uma única corporação (o qual muitos Javeiros acreditam ser o mal) adorada no seu templo, o Visual Studio .NET.Você pensa que ele provavelmente seria legal; isso se todos os fiéis do Java não te discriminassem tanto por segui-la.

Lisp seria o Zen Budismo— Não há sintaxe, não há deuses a serem seguidos. O universo todo está ao seu alcance— você só precisa estar sintonizado. Muitos dizem que esta não é uma linguagem de jeito nenhum; outros dizem que é a única religião que faz sentido.

Perl seria o Voodoo— Uma série de ritos com encantamentos que envolvem sangue e bonecos espetados são usados para fins imediatos. Geralmente utilizado quando seu chefe lhe obriga a fazer uma tarefa urgente às 10 horas numa sexta à noite.

Assembly seria o Espiritismo— Passa-lhe a idéia que você mesmo também pode ser um médium e entrar no mundo binário, mesmo que através de símbolos, sem a real necessidade dos lideres espirituais das outras religiões: os debbugers .

Ruby seria o Neopaganismo— A mistura de várias linguagens e idéias batidas em algo que pode ser reconhecido como uma linguagem. Seus adeptos crescem rapidamente e embora você os olhe com suspeitas, no geral, são pessoas bem intencionadas e com nenhuma vontade real de ferir ninguém.

Visual Basic seria a Maçonaria— Com a idéia de conseguir as coisas facilmente e se tornar rico vendendo rapidamente seus programas que são feitos rapidamente.

COBOL seria o Antigo paganismo – Uma vez isto dominava uma vasta região e era muito importante, mas hoje em dia está quase morto, para o bem de todos nós. Mesmo que muitos fiquem assustados com os rituais exigidos por suas divindades, há quem insista em mantê-lo vivo ainda hoje.

Python seria o Humanismo— É simples, irrestrito e tudo que você precisa seguir é o bom senso. Muito dos seus adeptos clamam estar livre do fardo imposto por outras linguagens e que eles redescobriram o prazer de programar. Contudo há quem diga que isto é apenas outra forma de algoritmo.

Lua seria a Wicca— Uma linguagem panteísta facilmente adaptável com qualquer cultura. Seu código é muito liberal permitindo técnicas que seriam descritas como mágica por outros acostumados com linguagens mais tradicionais. Tem uma forte conexão com o céu.

HTML seria o Ateísmo—Não há templos como os IDEs nas outras religiões, nem mentores espirituais como os compiladores. Não é nem mesmo uma linguagem embora muita gente ache que sim. É a falta de qualquer crença e ainda que existam “sugestões” de como fazer ninguém realmente as segue. CENTER é uma tag depreciada? Meh. Morais são relativas, codifique o que quiser e os browsers ainda darão certo.

Texto Cara-de-PauMente Copiado de Administradores Malvados

Hack’s, lá e de volta outra vez.

Tilo — Sat, 07 Mar 2009 18:02:51 +0000

quem desenvolve web concerteza já passou por um momento como esse ilustrado pelo nerdson, a questão é que não adianta em quanto a microsoft nào fezer com o IE o mesmo que ela faz com o MSN, a atualização Obrigatoria, nos vamos continuar a fazer Hacks pro IE6.

porem qual o hack certo para ser usado?

eu conheço algumas formas de fazer hack, e hoje vou tentar explicar como usa-los;

HTML tag:

Todas as Versões do IE

IE7 e Superior

IE7 e Anterior

esses Hack são principalmete para um conteudo que não está sendo renderisado no IE, você pode colocar uma marcação adicional para ele.

CSS Selector:

IE 7

*:first-child+html body seletor { propriedade: valor; }

IE 6

* html body seletor { propriedade: valor; }

Chrome e Safari

body:nth-of-type(1) seletor { propriedade: valor; }

Opera 9 e anteriores

html:first-child seletor { propriedade: valor; }

use essa forma apenas quando você precisa que uma determinada classe seja vista apenas pelo navegador em questão, isso ajuda muito quando você criou um hack no HTML e precisa tratar esse elemento.

TiloWR » HTML

ASP.NET MVC View Engines: WebForms, NHaml, Spark e Razor!

Leia Também:

Otimizando desenvolvimento HTML com Zen-coding e Notepad++ ( Instalação + Dica )

Leia Também:

Se programação fosse religião, qual seria a sua?

Leia Também:

Hack’s, lá e de volta outra vez.

Leia Também: