SlideShare une entreprise Scribd logo
1  sur  17
TAMPA C# Group

Lightweight Web Development

           10/23/2012
     Presenter: Damiano Fusco
What we’ll be talking about
• About me
• ASP.NET and ViewState
• ASP.NET MVC
• AJAX
• WCF to move towards SOA
• Overlaps between ASP.NET MVC and WCF (in some
  ways)
• Does ASP.NET MVC really helps separating UI from
  Server Side concerns?
• jQuery and jTemplates
• RESTful WCF with jQuery/jTemplates
About me
                          Damiano Fusco

• Musician: I’ve studied music for a total of 15 years and played
  professionally for about 12.
• Graphic Designer: Always did free-lance work as a graphic designer
  along with music
• Web Designer (briefly): Started creating static html sites when
  internet was starting to become popular (I had a 28kb modem back
  then)
• Software Developer: Eventually switched to software development
  about 16 years ago when switching to creating dynamic websites
  (using Classic ASP and SQL Server 7.0 back then). For about 90% of
  my career I worked with Web.
• Used .NET since 2003
• Recently learned a little bit about Linux and NodeJS using MongoDB
ASP.NET and ViewState
• If you use traditional ASP.NET Web Forms with Server Side
  Controls, you get ViewState as well.
• ViewState is a hidden field on a page that ASP.NET uses to
  manage control states.
• ViewState consumes bandwidth
• ViewState has a performance hit on the server (and
  eventually on the client as well)
• Therefore, ASP.NET is not really good for UI. However, ASP.NET
  can still be used for what is good at on the server side.
ASP.NET MVC
 Moved away from ViewState, but framed in the MVC design pattern

• Model
   – Structured data or entity. Usually the design of this is tied to a specific
     need in the UI. So, it usually means Model for View.

• View
   – Represents a single view, most of the time a single html page. MVC
     Views are most of the time files with both HTML and server side code
     (Razor or other view engine). The server will be consuming resources
     to process Razor or other view engine language.

• Controller
   – We can say that offers ways to link Model to Views with the promise of
     de-coupling (separation) UI from the backend.
AJAX
              Asynchronous Javascript and XML

• Not tight to a specific technology, even thought
  started with Javascript and XML, therefore the name.
  Mostly used today with JSON instead of XML
• It’s a group of web development techniques to
  facilitate devel of asynchronous web apps. Some
  define Ajax as a “client” technology, but it’s more
  than that.
WCF

• Microsoft Framework to build Service
  Oriented Architectures (SOA)
• Evolved from Microsoft Web Services (.asmx)
• Nice out-of-the-box features to quickly build
  services.
• Bad: usually hard to configure. But for most
  common uses there are simpler ways to
  implement WCF.
Overlaps between ASP.NET MVC and
        WCF (in some ways)
• We could think of a Controller to really be like a
  Service in many ways. Indeed, a controller usually
  returns a view as an ActionResult, or JSON as a
  JsonResult.
• If you ever used Ajax with ASP.NET MVC, you
  probably found yourself in using the Controller as a
  service.
• In this case, now you are not really following the
  MVC pattern as originally thought.
• Nice thing about MVC is also the Url Routing.
  It truly offers a nice out-of-the-box way to
  have friendly routes that map to your
  Controllers and Views.
• In WCF most of the time you’ll be doing
  routing as well with the help of
  System.Web.Routing and some other .NET
  namespaces.
• In a way we could say that ASP.NET MVC offers
  a mix of both: services (server side) and UI
  (views) in the same project, while WCF is
  really only for services (server side).
Does ASP.NET MVC really helps separating UI from
               Server Side concerns?

• I personally think ASP.NET MVC frames you in
  a specific pattern. You can still do Ajax and
  other things, but that you’ll be not be really
  following a pure ASP.NET MVC approach.
jQuery and jTemplates
• Most of you probably know what jQuery is.
• jQuery is a framework build on top of JavaScript
  mostly to simplify DOM manipulation (DHTML) but
  also to simplify Ajax calls to server, and ultimately
  the promise of Asyncronous Web Apps.
• jTemplates, a jquery add-in, can be used to render
  html views directly in the client (browser)
• There are probably other jquery add-ins, but all my
  experience has been with jTemplates.
• jTemplates allows you to push to the client the work of
  rendering your views.
• But where are the views? Well, with this approach your
  views will be really snippets of html stored in .htm files
  that you’ll be loading when needed through
  jTemplates.
• There are pros and cons with this approach, as
  anything. The main pro I like is the greatly improved
  user experience (UX). The main con most people will
  face is the shift from doing views in Razor with C# to
  using JavaScript/jQuery/jTemplates syntax and some of
  the limitations that might come with that. For one
  thing, you’ll have to love JavaScript. Furthermore,
  you’ll have to love debugging JavaScript as well.
• One thing that is above everything else and I’ll
  repeat once more here is that with jTemplates
  you’ll be pushing the work to the client
  browser, while with ASP.NET MVC that work
  will be done on the server side. From my
  experience this is usually a good thing, but
  there might be cases in which you might want
  to do more of the work on the server and
  leave the client with much less work to do.
RESTful WCF with jQuery/jTemplates
• A much more lightweight approach is to move
  towards a SOA.
• We can use WCF on the server side to offer a
  REST API from where we get the data (or perform
  CRUD operations). This really separate this from
  anything else much better than ASP.NET MVC
• We then use jQuery/jTemplates to make calls to
  our REST API and render jTemplates views on the
  client side. Again, this really helps remove the UI
  concerns from the services concerns.
• This approach requires more organization and
  discipline from the developer. You’ll have to
  constantly make sure you organize your files in
  a logical way, follow a good naming
  convention, aim for code reusability also in
  your jQuery/jTemplates files.
• At the same time, this approach offers much
  more flexibility to break your own rules from
  time to time, without causing spaghetti code
  or breaking the main design approach. As long
  as you are making exceptions to serve a
  specific need.
Other advantages
• You’ll be able to quickly offer your WCF REST
  services as an API by hosting them in an
  ASP.NET Web App. This way you can consume
  them also from a mobile app or other client.
• You’ll be able at any time to move from WCF
  to another service technology (i.e. Node.js)
  without having to rewrite you jQuery/HTML
• You’ll have much less code to maintain.

Contenu connexe

Tendances

MEAN Stack - Introduction & Advantages - Why should you switch to MEAN stack ...
MEAN Stack - Introduction & Advantages - Why should you switch to MEAN stack ...MEAN Stack - Introduction & Advantages - Why should you switch to MEAN stack ...
MEAN Stack - Introduction & Advantages - Why should you switch to MEAN stack ...Hariharan Ganesan
 
Introduction to ASP.NET MVC
Introduction to ASP.NET MVCIntroduction to ASP.NET MVC
Introduction to ASP.NET MVCKhaled Musaied
 
Web technologies practical guide
Web technologies practical guideWeb technologies practical guide
Web technologies practical guidesamir azazy
 
Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013Thomas Robbins
 
Isomorphic web application
Isomorphic web applicationIsomorphic web application
Isomorphic web applicationOliver N
 
BP101: A Modernized Workflow w/ Domino/XPages
BP101: A Modernized Workflow w/ Domino/XPagesBP101: A Modernized Workflow w/ Domino/XPages
BP101: A Modernized Workflow w/ Domino/XPagesedm00se
 
node.js in action
node.js in actionnode.js in action
node.js in actionKaran Misra
 
learn mvc project in 7 day
learn mvc project in 7 daylearn mvc project in 7 day
learn mvc project in 7 dayQuach Long
 
Single Page Application presentation
Single Page Application presentationSingle Page Application presentation
Single Page Application presentationJohn Staveley
 
ReactJS - Re-rendering pages in the age of the mutable DOM
ReactJS - Re-rendering pages in the age of the mutable DOMReactJS - Re-rendering pages in the age of the mutable DOM
ReactJS - Re-rendering pages in the age of the mutable DOMMarc Cyr
 
Conquering AngularJS Limitations
Conquering AngularJS LimitationsConquering AngularJS Limitations
Conquering AngularJS LimitationsValeri Karpov
 
Lessons in Open Source from the MongooseJS ODM
Lessons in Open Source from the MongooseJS ODMLessons in Open Source from the MongooseJS ODM
Lessons in Open Source from the MongooseJS ODMValeri Karpov
 
Introduction To Asp.Net Mvc
Introduction To Asp.Net MvcIntroduction To Asp.Net Mvc
Introduction To Asp.Net MvcRishu Mehra
 
Silver Light By Nyros Developer
Silver Light By Nyros DeveloperSilver Light By Nyros Developer
Silver Light By Nyros DeveloperNyros Technologies
 
Capybara-Webkit
Capybara-WebkitCapybara-Webkit
Capybara-Webkitbostonrb
 

Tendances (20)

MEAN Stack - Introduction & Advantages - Why should you switch to MEAN stack ...
MEAN Stack - Introduction & Advantages - Why should you switch to MEAN stack ...MEAN Stack - Introduction & Advantages - Why should you switch to MEAN stack ...
MEAN Stack - Introduction & Advantages - Why should you switch to MEAN stack ...
 
Introduction to ASP.NET MVC
Introduction to ASP.NET MVCIntroduction to ASP.NET MVC
Introduction to ASP.NET MVC
 
Web technologies practical guide
Web technologies practical guideWeb technologies practical guide
Web technologies practical guide
 
Single Page Applications
Single Page ApplicationsSingle Page Applications
Single Page Applications
 
ASP .NET MVC - best practices
ASP .NET MVC - best practicesASP .NET MVC - best practices
ASP .NET MVC - best practices
 
MEAN stack
MEAN stackMEAN stack
MEAN stack
 
Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013
 
Isomorphic web application
Isomorphic web applicationIsomorphic web application
Isomorphic web application
 
BP101: A Modernized Workflow w/ Domino/XPages
BP101: A Modernized Workflow w/ Domino/XPagesBP101: A Modernized Workflow w/ Domino/XPages
BP101: A Modernized Workflow w/ Domino/XPages
 
node.js in action
node.js in actionnode.js in action
node.js in action
 
MEAN Stack
MEAN StackMEAN Stack
MEAN Stack
 
learn mvc project in 7 day
learn mvc project in 7 daylearn mvc project in 7 day
learn mvc project in 7 day
 
Single Page Application presentation
Single Page Application presentationSingle Page Application presentation
Single Page Application presentation
 
ReactJS - Re-rendering pages in the age of the mutable DOM
ReactJS - Re-rendering pages in the age of the mutable DOMReactJS - Re-rendering pages in the age of the mutable DOM
ReactJS - Re-rendering pages in the age of the mutable DOM
 
Conquering AngularJS Limitations
Conquering AngularJS LimitationsConquering AngularJS Limitations
Conquering AngularJS Limitations
 
Beginning In J2EE
Beginning In J2EEBeginning In J2EE
Beginning In J2EE
 
Lessons in Open Source from the MongooseJS ODM
Lessons in Open Source from the MongooseJS ODMLessons in Open Source from the MongooseJS ODM
Lessons in Open Source from the MongooseJS ODM
 
Introduction To Asp.Net Mvc
Introduction To Asp.Net MvcIntroduction To Asp.Net Mvc
Introduction To Asp.Net Mvc
 
Silver Light By Nyros Developer
Silver Light By Nyros DeveloperSilver Light By Nyros Developer
Silver Light By Nyros Developer
 
Capybara-Webkit
Capybara-WebkitCapybara-Webkit
Capybara-Webkit
 

Similaire à Lightweight webdev

Introduction to ASP.NET MVC
Introduction to ASP.NET MVCIntroduction to ASP.NET MVC
Introduction to ASP.NET MVCSirwan Afifi
 
Web Development Today
Web Development TodayWeb Development Today
Web Development Todaybretticus
 
Fast Track introduction to ASP.NET MVC
Fast Track introduction to ASP.NET MVCFast Track introduction to ASP.NET MVC
Fast Track introduction to ASP.NET MVCAnkit Kashyap
 
Which is better asp.net mvc vs asp.net
Which is better  asp.net mvc vs asp.netWhich is better  asp.net mvc vs asp.net
Which is better asp.net mvc vs asp.netConcetto Labs
 
Intro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETIntro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETAlan Hecht
 
The future of web development write once, run everywhere with angular js an...
The future of web development   write once, run everywhere with angular js an...The future of web development   write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...Mark Leusink
 
The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...Mark Roden
 
Ppt for Online music store
Ppt for Online music storePpt for Online music store
Ppt for Online music storeADEEBANADEEM
 
Best of Microsoft Dev Camp 2015
Best of Microsoft Dev Camp 2015Best of Microsoft Dev Camp 2015
Best of Microsoft Dev Camp 2015Bluegrass Digital
 
MVC Architecture in ASP.Net By Nyros Developer
MVC Architecture in ASP.Net By Nyros DeveloperMVC Architecture in ASP.Net By Nyros Developer
MVC Architecture in ASP.Net By Nyros DeveloperNyros Technologies
 
Comparative analysis of java script framework
Comparative analysis of java script frameworkComparative analysis of java script framework
Comparative analysis of java script frameworkNishant Kumar
 
Targeting Mobile Platform with MVC 4.0
Targeting Mobile Platform with MVC 4.0Targeting Mobile Platform with MVC 4.0
Targeting Mobile Platform with MVC 4.0Mayank Srivastava
 

Similaire à Lightweight webdev (20)

Introduction to ASP.NET MVC
Introduction to ASP.NET MVCIntroduction to ASP.NET MVC
Introduction to ASP.NET MVC
 
Sitecore mvc
Sitecore mvcSitecore mvc
Sitecore mvc
 
Web Development Today
Web Development TodayWeb Development Today
Web Development Today
 
Mvc
MvcMvc
Mvc
 
Fast Track introduction to ASP.NET MVC
Fast Track introduction to ASP.NET MVCFast Track introduction to ASP.NET MVC
Fast Track introduction to ASP.NET MVC
 
Which is better asp.net mvc vs asp.net
Which is better  asp.net mvc vs asp.netWhich is better  asp.net mvc vs asp.net
Which is better asp.net mvc vs asp.net
 
Intro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETIntro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NET
 
The future of web development write once, run everywhere with angular js an...
The future of web development   write once, run everywhere with angular js an...The future of web development   write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...
 
The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...
 
Ppt for Online music store
Ppt for Online music storePpt for Online music store
Ppt for Online music store
 
MVC Framework
MVC FrameworkMVC Framework
MVC Framework
 
Aspnet mvc
Aspnet mvcAspnet mvc
Aspnet mvc
 
Mvc3 part1
Mvc3   part1Mvc3   part1
Mvc3 part1
 
Best of Microsoft Dev Camp 2015
Best of Microsoft Dev Camp 2015Best of Microsoft Dev Camp 2015
Best of Microsoft Dev Camp 2015
 
MVC Architecture in ASP.Net By Nyros Developer
MVC Architecture in ASP.Net By Nyros DeveloperMVC Architecture in ASP.Net By Nyros Developer
MVC Architecture in ASP.Net By Nyros Developer
 
Comparative analysis of java script framework
Comparative analysis of java script frameworkComparative analysis of java script framework
Comparative analysis of java script framework
 
Angular js
Angular jsAngular js
Angular js
 
Targeting Mobile Platform with MVC 4.0
Targeting Mobile Platform with MVC 4.0Targeting Mobile Platform with MVC 4.0
Targeting Mobile Platform with MVC 4.0
 
Transforming the web into a real application platform
Transforming the web into a real application platformTransforming the web into a real application platform
Transforming the web into a real application platform
 
Asp 1a-aspnetmvc
Asp 1a-aspnetmvcAsp 1a-aspnetmvc
Asp 1a-aspnetmvc
 

Lightweight webdev

  • 1. TAMPA C# Group Lightweight Web Development 10/23/2012 Presenter: Damiano Fusco
  • 2. What we’ll be talking about • About me • ASP.NET and ViewState • ASP.NET MVC • AJAX • WCF to move towards SOA • Overlaps between ASP.NET MVC and WCF (in some ways) • Does ASP.NET MVC really helps separating UI from Server Side concerns? • jQuery and jTemplates • RESTful WCF with jQuery/jTemplates
  • 3. About me Damiano Fusco • Musician: I’ve studied music for a total of 15 years and played professionally for about 12. • Graphic Designer: Always did free-lance work as a graphic designer along with music • Web Designer (briefly): Started creating static html sites when internet was starting to become popular (I had a 28kb modem back then) • Software Developer: Eventually switched to software development about 16 years ago when switching to creating dynamic websites (using Classic ASP and SQL Server 7.0 back then). For about 90% of my career I worked with Web. • Used .NET since 2003 • Recently learned a little bit about Linux and NodeJS using MongoDB
  • 4.
  • 5. ASP.NET and ViewState • If you use traditional ASP.NET Web Forms with Server Side Controls, you get ViewState as well. • ViewState is a hidden field on a page that ASP.NET uses to manage control states. • ViewState consumes bandwidth • ViewState has a performance hit on the server (and eventually on the client as well) • Therefore, ASP.NET is not really good for UI. However, ASP.NET can still be used for what is good at on the server side.
  • 6. ASP.NET MVC Moved away from ViewState, but framed in the MVC design pattern • Model – Structured data or entity. Usually the design of this is tied to a specific need in the UI. So, it usually means Model for View. • View – Represents a single view, most of the time a single html page. MVC Views are most of the time files with both HTML and server side code (Razor or other view engine). The server will be consuming resources to process Razor or other view engine language. • Controller – We can say that offers ways to link Model to Views with the promise of de-coupling (separation) UI from the backend.
  • 7. AJAX Asynchronous Javascript and XML • Not tight to a specific technology, even thought started with Javascript and XML, therefore the name. Mostly used today with JSON instead of XML • It’s a group of web development techniques to facilitate devel of asynchronous web apps. Some define Ajax as a “client” technology, but it’s more than that.
  • 8. WCF • Microsoft Framework to build Service Oriented Architectures (SOA) • Evolved from Microsoft Web Services (.asmx) • Nice out-of-the-box features to quickly build services. • Bad: usually hard to configure. But for most common uses there are simpler ways to implement WCF.
  • 9. Overlaps between ASP.NET MVC and WCF (in some ways) • We could think of a Controller to really be like a Service in many ways. Indeed, a controller usually returns a view as an ActionResult, or JSON as a JsonResult. • If you ever used Ajax with ASP.NET MVC, you probably found yourself in using the Controller as a service. • In this case, now you are not really following the MVC pattern as originally thought.
  • 10. • Nice thing about MVC is also the Url Routing. It truly offers a nice out-of-the-box way to have friendly routes that map to your Controllers and Views. • In WCF most of the time you’ll be doing routing as well with the help of System.Web.Routing and some other .NET namespaces. • In a way we could say that ASP.NET MVC offers a mix of both: services (server side) and UI (views) in the same project, while WCF is really only for services (server side).
  • 11. Does ASP.NET MVC really helps separating UI from Server Side concerns? • I personally think ASP.NET MVC frames you in a specific pattern. You can still do Ajax and other things, but that you’ll be not be really following a pure ASP.NET MVC approach.
  • 12. jQuery and jTemplates • Most of you probably know what jQuery is. • jQuery is a framework build on top of JavaScript mostly to simplify DOM manipulation (DHTML) but also to simplify Ajax calls to server, and ultimately the promise of Asyncronous Web Apps. • jTemplates, a jquery add-in, can be used to render html views directly in the client (browser) • There are probably other jquery add-ins, but all my experience has been with jTemplates.
  • 13. • jTemplates allows you to push to the client the work of rendering your views. • But where are the views? Well, with this approach your views will be really snippets of html stored in .htm files that you’ll be loading when needed through jTemplates. • There are pros and cons with this approach, as anything. The main pro I like is the greatly improved user experience (UX). The main con most people will face is the shift from doing views in Razor with C# to using JavaScript/jQuery/jTemplates syntax and some of the limitations that might come with that. For one thing, you’ll have to love JavaScript. Furthermore, you’ll have to love debugging JavaScript as well.
  • 14. • One thing that is above everything else and I’ll repeat once more here is that with jTemplates you’ll be pushing the work to the client browser, while with ASP.NET MVC that work will be done on the server side. From my experience this is usually a good thing, but there might be cases in which you might want to do more of the work on the server and leave the client with much less work to do.
  • 15. RESTful WCF with jQuery/jTemplates • A much more lightweight approach is to move towards a SOA. • We can use WCF on the server side to offer a REST API from where we get the data (or perform CRUD operations). This really separate this from anything else much better than ASP.NET MVC • We then use jQuery/jTemplates to make calls to our REST API and render jTemplates views on the client side. Again, this really helps remove the UI concerns from the services concerns.
  • 16. • This approach requires more organization and discipline from the developer. You’ll have to constantly make sure you organize your files in a logical way, follow a good naming convention, aim for code reusability also in your jQuery/jTemplates files. • At the same time, this approach offers much more flexibility to break your own rules from time to time, without causing spaghetti code or breaking the main design approach. As long as you are making exceptions to serve a specific need.
  • 17. Other advantages • You’ll be able to quickly offer your WCF REST services as an API by hosting them in an ASP.NET Web App. This way you can consume them also from a mobile app or other client. • You’ll be able at any time to move from WCF to another service technology (i.e. Node.js) without having to rewrite you jQuery/HTML • You’ll have much less code to maintain.