domingo, diciembre 01, 2013

Como empezar con aplicaciones web SPA (Simple Page Application)

Hola amig@s,

hace poco me interesé por las aplicaciones web y su forma de trabajar (sólo la parte front-end), que tecnologías, frameworks y herramientas se utilizan en este mundo nuevo, y ayyyy Dios mío, ¿pero esto que lo que es?, como dirían en Murcia, ay pobre de mi, aquí hay miles de conceptos nuevos, varios frameworks, etc. y lo que es peor, hay varios navegadores con distintas versiones y comportamientos distintos, uyyyyy, palabra mayores.

Así que mediante esta entrada no pretendo establecer una norma o directriz de trabajo, ni tiene que ser utilizada como referencia para la creación de aplicaciones web, ni SPA ni nada de nada. Esta entrada es solo para transmitir mi experiencia con ellas y que es lo que más me ha gustado a título personal.
 

Herramientas.

Mi herramienta de trabajo hasta este momento era VS2010, así que decidí comprobar que tal iba VS2012 con las apps webs y me encontré con la creación de proyectos ASP.NET, pero uff hay varios tipos, ¿cuál de ellos?,:
 

 
 
 seleccioné MVC 4 (Model View Controller), sonaba bien y además el patrón lo conozco, y aquí viene la pregunta de nuevo, motor de vistas? que aplicación? "razor?", que es razor?, ah sí, es nuevo y Scott Guthrie dice que es "Easy to Learn", pues nada a por razor:
 
 
 
Pero "oh my God", si ha salido el VS2013, que trae de nuevo? nooooooo, cambia todo a una aplicación ASP.NET? un sólo punto de partida??:
 


Sí, parece que ahora ya sólo tenemos un punto de entrada y luego podremos seleccionar más opciones a gusto del consumidor.
 
Así que adelante, ya podemos empezar.

Patrón en el front-end

Lo del patrón es un cachondeo, y digo un cachondeo por las conversaciones en el bar con unas cervezas, que si angular es MVC, que no lo es que es MVW, que si es mejor usar uno MVVM, bueno, en definitiva, hay varios frameworks y se implementan varios patrones, de lo que he podido averiguar es esto:
 
angularjs es MVC pero ellos lo llaman MVW (Model View Wathever)
knockout es MVVM, o sea como el que usamos en las aplicaciones SL5, WPF o XAML de W8/8.1 y WP8.
También tenemos Durandal que dice que es un patrón MV* es decir, MV y lo que quieras, pero no lo conozco y no puedo opinar.
 

Vistas

Pues lo dicho anteriormente: Razor más HTML5 y CSS, con Bootstrap. Más cosas?, sí más, mucho más, a ver, HTML5 me lo dejo para el final, CSS y Bootstrap, pues vamos a ver un poco de código:
 
BootStrap en HTML


 
aghhhhh me da algo!!! cuanta class y nombre raro,,,,,
 
Pues sí, Bootstrap es http://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29, un front-end para construir y mantener aplicaciones web y websites de una forma fácil y consistente (no quiero ni saber como era antes) y puedes intentar entender sus tripas en: http://getbootstrap.com/css/ y adaptártelo o mejor te pasas por aquí y te compras una plantilla que te facilite las cosas.
 
CSS de Bootstrap

Pues iba a mostrar algo de código CSS pero como creo que nunca voy a tratarlo o investigar porque es de lo más enrevesado que he visto prefiero ni verlo. Con esto quiero decir que si tienes una buena plantilla o un buen equipo de diseño no tienes que tener mayores problemas.
 

Controladores

El tema de controladores he decidido usar angular como pieza fundamental de comunicación front-end<>back-end, siguiendo los consejos del amigo Pedro, que aunque el blog esté en Geeks, es de los que se puede leer.


 
 
Reflexión:
HTML5 , sí, sí, HTML5, eso es como los titulares del periódico, una vez lo leas ponte a leerte el artículo con todo lo demás, bootstrap, angular, css y sus clases, puffff, hay mucha materia.
 
¿Porqué SPA?, porque está de moda, así de fácil, luego ya indagas y te das cuenta de la comodidad de un framework como angularjs y como me gustan los comics pues eso:
 
 
y te vas a ver algo, ¿unos primeros pasos? y te compras un libro para completar el aprendizaje y ya tienes el lío montado y unas semanas de pelea con todo.
 
Y como no podía ser de otra manera todo esto que explico en este post se lo debo al gran @_pedrohurtado que me tiene entretenido siempre con cosas así.
 

Blogs que sigo

 
 

Etiquetas

.net (1) ALGORITMO (4) algoritmos (1) Android (1) angular (2) aplicaciones WEB (1) ARGENTINA (1) ASP (4) asp .NET (1) ASP .NET Identity (1) attach (1) Azure (1) base de datos (1) BINDING (1) BioInformática (2) bootstrap (1) C (2) C# (27) castellano (1) catalán (1) Charla (1) CheckedListBox (1) Clase (1) clausura transitiva (2) CLIENTES (1) Closing (1) Combobox (1) Comisiones (1) CONCURSO (1) condones (1) consultas (1) corrupta (1) CORS OWIN (1) CORS WEB API 2 (1) Criptografía (1) CUENTA NARANJA (1) Custom Control (1) Daniel Seara (1) DATAGRIDVIEW (1) David Salgado (2) dendrograma (6) depurar (1) desarrollo (1) Deserializar (1) DEVCAMP (2) durex (1) e-DNI (1) el Guille (2) Eladio Rincón (1) elGamal (1) encriptación (1) encuesta (1) Entidad (1) ERROR (2) error 3624 (1) España (1) España es nido de víboras. (1) Euclides (1) Euclides extendido (1) evento (1) eventos. (1) factorización (1) factorizar (1) física (1) Framework 2.0 (1) Framework 3.5 (5) Framework 4 (2) Francisco González (1) Francisco Ruiz (1) GO (1) google (1) gossip (1) Grupos de usuarios (1) Guadalajara (1) Guille Comunity Tour (2) Gusenet (9) GUSENET. (1) Huelga informáticos (1) IBEX 35 (1) Idioma (1) IFT (1) IISExpress (1) Indice de Fuerza Tecnica (1) informática (1) Informix (1) ING DIRECT (1) INGDIRECT (1) Ingeniería Informática (2) Inteligencia artificial (5) Intro (1) IOS (1) IPad (1) IPhone (1) IV Aniversario (1) JavaScript (2) JPA (2) keybd_event (1) LA CAIXA (1) La Pineda (1) ladroentidad (1) Lector RSS (2) LINQ (5) LINQ2XML (1) ListBox (1) Live Distributed Objects (1) llenar (1) LOG (1) Madrid .NET (1) MainMenu (1) MAP (1) MAP 2011 (1) MAR DEL PLATA (1) matemáticas (1) Matriculación (1) MDIList (1) MdiWindowsListItem (1) MenuItem (1) MenuStrip (1) Microsoft (18) Microsoft Active Professional (1) Miguel Egea (2) MSDE 2 (1) MSDE 2000 (1) MVVM Light (2) mysql (1) NAMESPACE (1) Needleman (2) NET (1) NS (1) Oferta empleo (1) Office 14 (1) Office 2007 (1) Office 2009 (1) ON ERROR (1) OOB (1) Oscar Montesinos (1) OWIN (1) OWIN Security middleware (1) Paginación (1) PDC (1) Pedro Hurtado (1) PINTARTECA (1) PrinterSettings (1) Process (1) ProcessStartInfo (1) Programador (1) Relacional (1) robo (1) RSS (1) Rubén Garrigós (1) Salvador Ramos (1) Santa Pola (1) scrape (1) scraping (1) ScrollBar (1) Secretaría (1) SendInput (1) SENDKEYS (1) Sergio Vázquez (1) Serializar (1) Silverlight 2.0 (2) Silverlight 4 (1) Silverlight 5 (3) Silverlight. (1) Sindicado (1) Sistema Personal de Trading (3) Sistemas Distribuidos (1) SOLID SUMMIT 2009 (1) SPT (2) SQL Server (3) SQL Server 2000 (2) SQL Server 2005 (2) SQL Server 2008 (3) SQL Server Denali (1) SQL Server Information Services. (1) SQLU (1) SSIS (1) SUMMIT SQL (1) Suspect (1) Syndication (1) TAB (1) Tablas (1) Tarragona (1) Token bearer (1) ToolStripMenuItem (1) ToString() (1) Traductor (1) transacciones (1) treeview (1) truco (1) TRY CATCH (1) UCI (1) Unience (2) Universad (1) Universidad Oberta Catalunya (2) UOC (8) Usuarios. (1) VB (1) VB6 (1) VB9 (1) VIAJAR (1) Vila-seca (1) VISUAL BASIC (3) Visual Basic. (1) visual studio (1) Visual Studio 2005 (1) Visual Studio 2008 (16) Visual Studio 2010 (2) Visual Studio 2013 (1) VS2010 (1) VSTA (1) VSTO (1) WCF (1) WEB API (1) web.config (1) WebClient (1) WF (1) windows (1) Windows 7 (3) Windows 8 (2) Windows Azure (1) Windows pone (1) Windows Server 2008 (1) Windows Vista (1) woff (1) WP7 (1) WPF (1) Wunsch (2) XAML (4) XDocument (1) XElement (1) XML (3) XNA (1) Yield (2)