SlideShare a Scribd company logo
1 of 10
Download to read offline
Creating Tomorrow’s Web
Applications Using Today’s
Technologies
Mike Suarez
Senior Consultant
email: MikeSu@magenic.com
Goals of Presentation
» Discuss these Patterns & Technologies:
  » MVC Pattern
  » ASP.Net MVC 3
  » HTML5
  » Modernizr
  » jQuery


» Create an application from scratch that:
  » Consumes the services created in this morning’s session
  » Demonstrates the power & ease of use of above technologies
MVC & ASP.Net MVC
» MVC
  » The Design Pattern known as Model-View-Controller



» ASP .Net MVC 3
  » A Framework developed by Microsoft to help facilitate
    implementation of the MVC Pattern.
Model-View-Controller
» Been around a long time.
» Derived other patterns (i.e. MVP, MVVM)
» Has many implementations
» Major components:
  » Model: The Domain (Business Logic)
  » View: The UI (UI Logic)
  » Controller: Mediates between the Model & View (Input Logic)
» Major benefits:
  » Better organized code (Separation of concerns)
  » Unit Testability
ASP.Net MVC Framework
» Major Components:
  » Controller - class of Actions, invoked by HTTP requests.
  » View - HTML mixed with C# (or VB) that gets invoked by an Action, rendered
    by the View Engine, and displayed by the browser.
  » Model - an object that encapsulates business logic, data retrieval & data
    persistence.
» Key Features/Benefits:
  » Routing - Straightforward handling of HTTP requests.
  » Base Classes – Keep your Controller clean, straightforward.
  » Convention over Configuration – Simple to implement.
  » Scaffolding - Reduces time to get development underway.
  » View Engine – Clean blend of HTML and C#.
  » Helper Methods – Reduce HTML & saves time.
Other concepts you’ll see in the Demo
» ViewModels
  » A class to leverage ASP.Net MVC 3 Model Binding.
  » Not quite the same as ViewModel in MVVM implementations seen in
    WPF & SL.
» Dependency Injection
  » Allows Dependencies to be injected into an object at run time.
  » Will be demonstrated in the controller’s constructor.
  » Gives us the ability to mock up dependencies for automated unit tests.
  » Although our implementation doesn’t fully adhere to the Dependency
    Inversion Principle, ASP.NET MVC 3 contains an IDependencyResolver
    interface for that.



                                           6
What is HTML5?
» Goals:
  » A more stringent set of guidelines for how layout engines implement
    existing tags/attributes.
  » An updated set of tags and attributes to allow you to do more with
    HTML.

» Benefits:
  » Better compatibility among browsers.
  » Richer web experience.
  » Onus on browser (layout engine) to implement.
  » Less coding/dependence on plug-ins



                                           7
Modernizr
» Reality about HTML5... Great concept, but...
  » Specification is a “living document”.
  » No completion date in sight.
  » Browsers are adopting the specs at different rates.
» Therefore
  » Feel free to use new HTML5 features.
  » But be prepared that the intended cross browser compatibility is still a
    ways away.
» Modernizr
  » A lightweight JS library to assist in:
     » Detecting if certain new features are implemented in the browser your app is
       running in.
     » Handling cases where features haven’t been implemented by the browser.



                                                   8
jQuery
» What is jQuery?
  » THE JavaScript library of JavaScript libraries.
  » Used by over 55% of the 10,000 most visited websites.
» Reasons for Popularity
  » Provides extensive functionality.
  » Takes cross browser issues into account.
  » Allows DOM elements to be “queried” with same ease of CSS
    selectors.
  » Drastically reduces the amount of JS code.




                                              9
Without further ado…


»Lets Start
 Coding!!!

                       10

More Related Content

What's hot

Web development today
Web development todayWeb development today
Web development todayJaydev Gajera
 
Introduction of ASP.NET MVC and AngularJS
Introduction of ASP.NET MVC and AngularJSIntroduction of ASP.NET MVC and AngularJS
Introduction of ASP.NET MVC and AngularJSMohamed Elkhodary
 
Arsitektur Aplikasi Modern - Faisal Henry Susanto
Arsitektur Aplikasi Modern - Faisal Henry SusantoArsitektur Aplikasi Modern - Faisal Henry Susanto
Arsitektur Aplikasi Modern - Faisal Henry SusantoDicodingEvent
 
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
 
Latest Javascript MVC & Front End Frameworks 2017
Latest Javascript MVC & Front End Frameworks 2017Latest Javascript MVC & Front End Frameworks 2017
Latest Javascript MVC & Front End Frameworks 2017AmarInfotech
 
MongoDB MEAN Stack Webinar October 7, 2015
MongoDB MEAN Stack Webinar October 7, 2015MongoDB MEAN Stack Webinar October 7, 2015
MongoDB MEAN Stack Webinar October 7, 2015Valeri Karpov
 
Introduction to ASP.NET MVC
Introduction to ASP.NET MVCIntroduction to ASP.NET MVC
Introduction to ASP.NET MVCKhaled Musaied
 
Modern Applications With Asp.net Core 5 and Vue JS 3
Modern Applications With Asp.net Core 5 and Vue JS 3Modern Applications With Asp.net Core 5 and Vue JS 3
Modern Applications With Asp.net Core 5 and Vue JS 3Alexandre Malavasi
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSM R Rony
 
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
 
A Smooth Transition to HTML5 Using MVVM
A Smooth Transition to HTML5 Using MVVMA Smooth Transition to HTML5 Using MVVM
A Smooth Transition to HTML5 Using MVVMChris Bannon
 
SharePoint 2010 Web Content Management - The Developer Story
SharePoint 2010 Web Content Management - The Developer StorySharePoint 2010 Web Content Management - The Developer Story
SharePoint 2010 Web Content Management - The Developer StoryWaldek Mastykarz
 
Conquering AngularJS Limitations
Conquering AngularJS LimitationsConquering AngularJS Limitations
Conquering AngularJS LimitationsValeri Karpov
 
Asp.net mvc basic introduction
Asp.net mvc basic introductionAsp.net mvc basic introduction
Asp.net mvc basic introductionBhagath Gopinath
 

What's hot (20)

Web development today
Web development todayWeb development today
Web development today
 
ASP .Net MVC 5
ASP .Net MVC 5ASP .Net MVC 5
ASP .Net MVC 5
 
Introduction of ASP.NET MVC and AngularJS
Introduction of ASP.NET MVC and AngularJSIntroduction of ASP.NET MVC and AngularJS
Introduction of ASP.NET MVC and AngularJS
 
Arsitektur Aplikasi Modern - Faisal Henry Susanto
Arsitektur Aplikasi Modern - Faisal Henry SusantoArsitektur Aplikasi Modern - Faisal Henry Susanto
Arsitektur Aplikasi Modern - Faisal Henry Susanto
 
Single Page Applications
Single Page ApplicationsSingle Page Applications
Single Page Applications
 
ITT Flisol 2013
ITT Flisol 2013ITT Flisol 2013
ITT Flisol 2013
 
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
 
XAML/C# to HTML5/JS
XAML/C#  to HTML5/JS XAML/C#  to HTML5/JS
XAML/C# to HTML5/JS
 
Latest Javascript MVC & Front End Frameworks 2017
Latest Javascript MVC & Front End Frameworks 2017Latest Javascript MVC & Front End Frameworks 2017
Latest Javascript MVC & Front End Frameworks 2017
 
MongoDB MEAN Stack Webinar October 7, 2015
MongoDB MEAN Stack Webinar October 7, 2015MongoDB MEAN Stack Webinar October 7, 2015
MongoDB MEAN Stack Webinar October 7, 2015
 
The RAW stack
The RAW stackThe RAW stack
The RAW stack
 
Introduction to ASP.NET MVC
Introduction to ASP.NET MVCIntroduction to ASP.NET MVC
Introduction to ASP.NET MVC
 
Modern Applications With Asp.net Core 5 and Vue JS 3
Modern Applications With Asp.net Core 5 and Vue JS 3Modern Applications With Asp.net Core 5 and Vue JS 3
Modern Applications With Asp.net Core 5 and Vue JS 3
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJS
 
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
 
A Smooth Transition to HTML5 Using MVVM
A Smooth Transition to HTML5 Using MVVMA Smooth Transition to HTML5 Using MVVM
A Smooth Transition to HTML5 Using MVVM
 
SharePoint 2010 Web Content Management - The Developer Story
SharePoint 2010 Web Content Management - The Developer StorySharePoint 2010 Web Content Management - The Developer Story
SharePoint 2010 Web Content Management - The Developer Story
 
Conquering AngularJS Limitations
Conquering AngularJS LimitationsConquering AngularJS Limitations
Conquering AngularJS Limitations
 
ASP.NET MVC for Begineers
ASP.NET MVC for BegineersASP.NET MVC for Begineers
ASP.NET MVC for Begineers
 
Asp.net mvc basic introduction
Asp.net mvc basic introductionAsp.net mvc basic introduction
Asp.net mvc basic introduction
 

Similar to Creating Tomorrow’s Web Applications Using Today’s Technologies

Valentine with Angular js - Introduction
Valentine with Angular js - IntroductionValentine with Angular js - Introduction
Valentine with Angular js - IntroductionSenthil Kumar
 
To Kill a Monolith: Slaying the Demons of a Monolith with Node.js Microservic...
To Kill a Monolith: Slaying the Demons of a Monolith with Node.js Microservic...To Kill a Monolith: Slaying the Demons of a Monolith with Node.js Microservic...
To Kill a Monolith: Slaying the Demons of a Monolith with Node.js Microservic...Tony Erwin
 
Introduction to ASP.NET MVC
Introduction to ASP.NET MVCIntroduction to ASP.NET MVC
Introduction to ASP.NET MVCSirwan Afifi
 
Selecting the Best Javascript Web Framework
Selecting the Best Javascript Web FrameworkSelecting the Best Javascript Web Framework
Selecting the Best Javascript Web FrameworkRajitha Pathiraja
 
Frameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic ReviewFrameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic Reviewnetc2012
 
Lightweight webdev
Lightweight webdevLightweight webdev
Lightweight webdevdamianofusco
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to conceptsAbhishek Sur
 
Comparative analysis of java script framework
Comparative analysis of java script frameworkComparative analysis of java script framework
Comparative analysis of java script frameworkNishant Kumar
 
ASP.NET MVC Best Practices malisa ncube
ASP.NET MVC Best Practices   malisa ncubeASP.NET MVC Best Practices   malisa ncube
ASP.NET MVC Best Practices malisa ncubeMalisa Ncube
 
Azure functions: Build apps faster with serverless architecture (March 2018)
Azure functions: Build apps faster with serverless architecture (March 2018)Azure functions: Build apps faster with serverless architecture (March 2018)
Azure functions: Build apps faster with serverless architecture (March 2018)Callon Campbell
 
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Ganesh Kondal
 

Similar to Creating Tomorrow’s Web Applications Using Today’s Technologies (20)

Javascript frameworks
Javascript frameworksJavascript frameworks
Javascript frameworks
 
Valentine with Angular js - Introduction
Valentine with Angular js - IntroductionValentine with Angular js - Introduction
Valentine with Angular js - Introduction
 
Mvc part 1
Mvc part 1Mvc part 1
Mvc part 1
 
MVC Framework
MVC FrameworkMVC Framework
MVC Framework
 
To Kill a Monolith: Slaying the Demons of a Monolith with Node.js Microservic...
To Kill a Monolith: Slaying the Demons of a Monolith with Node.js Microservic...To Kill a Monolith: Slaying the Demons of a Monolith with Node.js Microservic...
To Kill a Monolith: Slaying the Demons of a Monolith with Node.js Microservic...
 
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
 
Introduction to ASP.NET MVC
Introduction to ASP.NET MVCIntroduction to ASP.NET MVC
Introduction to ASP.NET MVC
 
Asp 1a-aspnetmvc
Asp 1a-aspnetmvcAsp 1a-aspnetmvc
Asp 1a-aspnetmvc
 
Aspnetmvc 1
Aspnetmvc 1Aspnetmvc 1
Aspnetmvc 1
 
Selecting the Best Javascript Web Framework
Selecting the Best Javascript Web FrameworkSelecting the Best Javascript Web Framework
Selecting the Best Javascript Web Framework
 
Frameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic ReviewFrameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic Review
 
Lightweight webdev
Lightweight webdevLightweight webdev
Lightweight webdev
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to concepts
 
Comparative analysis of java script framework
Comparative analysis of java script frameworkComparative analysis of java script framework
Comparative analysis of java script framework
 
ASP.NET MVC Best Practices malisa ncube
ASP.NET MVC Best Practices   malisa ncubeASP.NET MVC Best Practices   malisa ncube
ASP.NET MVC Best Practices malisa ncube
 
Azure functions: Build apps faster with serverless architecture (March 2018)
Azure functions: Build apps faster with serverless architecture (March 2018)Azure functions: Build apps faster with serverless architecture (March 2018)
Azure functions: Build apps faster with serverless architecture (March 2018)
 
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5
 
JavaScript MVC Frameworks: Backbone, Ember and Angular JS
JavaScript MVC Frameworks: Backbone, Ember and Angular JSJavaScript MVC Frameworks: Backbone, Ember and Angular JS
JavaScript MVC Frameworks: Backbone, Ember and Angular JS
 
Mvc3 part1
Mvc3   part1Mvc3   part1
Mvc3 part1
 
Angular js anupama
Angular js anupamaAngular js anupama
Angular js anupama
 

More from Code Mastery

Using SSRS Reports with SSAS Cubes
Using SSRS Reports with SSAS CubesUsing SSRS Reports with SSAS Cubes
Using SSRS Reports with SSAS CubesCode Mastery
 
Query Tuning for Database Pros & Developers
Query Tuning for Database Pros & DevelopersQuery Tuning for Database Pros & Developers
Query Tuning for Database Pros & DevelopersCode Mastery
 
Exploring, Visualizing and Presenting Data with Power View
Exploring, Visualizing and Presenting Data with Power ViewExploring, Visualizing and Presenting Data with Power View
Exploring, Visualizing and Presenting Data with Power ViewCode Mastery
 
Building a SSAS Tabular Model Database
Building a SSAS Tabular Model DatabaseBuilding a SSAS Tabular Model Database
Building a SSAS Tabular Model DatabaseCode Mastery
 
Designer and Developer Collaboration with Visual Studio 2012 and Expression B...
Designer and Developer Collaboration with Visual Studio 2012 and Expression B...Designer and Developer Collaboration with Visual Studio 2012 and Expression B...
Designer and Developer Collaboration with Visual Studio 2012 and Expression B...Code Mastery
 
Build automation best practices
Build automation best practicesBuild automation best practices
Build automation best practicesCode Mastery
 
Keynote Rockford Lhotka on the Microsoft Development Platftorm
Keynote   Rockford Lhotka on the Microsoft Development PlatftormKeynote   Rockford Lhotka on the Microsoft Development Platftorm
Keynote Rockford Lhotka on the Microsoft Development PlatftormCode Mastery
 
Session 5 Systems Integration Architectures: BizTalk VS Windows Workflow Foun...
Session 5 Systems Integration Architectures: BizTalk VS Windows Workflow Foun...Session 5 Systems Integration Architectures: BizTalk VS Windows Workflow Foun...
Session 5 Systems Integration Architectures: BizTalk VS Windows Workflow Foun...Code Mastery
 
Session 4 Future of BizTalk and the Cloud
Session 4  Future of BizTalk and the CloudSession 4  Future of BizTalk and the Cloud
Session 4 Future of BizTalk and the CloudCode Mastery
 
Session 3c The SF SaaS Framework
Session 3c  The SF SaaS FrameworkSession 3c  The SF SaaS Framework
Session 3c The SF SaaS FrameworkCode Mastery
 
Session 3b The SF SaaS Framework
Session 3b   The SF SaaS FrameworkSession 3b   The SF SaaS Framework
Session 3b The SF SaaS FrameworkCode Mastery
 
Session 3a The SF SaaS Framework
Session 3a  The SF SaaS FrameworkSession 3a  The SF SaaS Framework
Session 3a The SF SaaS FrameworkCode Mastery
 
Session 2 Integrating SharePoint 2010 and Windows Azure
Session 2   Integrating SharePoint 2010 and Windows AzureSession 2   Integrating SharePoint 2010 and Windows Azure
Session 2 Integrating SharePoint 2010 and Windows AzureCode Mastery
 
Session 1 IaaS, PaaS, SaaS Overview
Session 1   IaaS, PaaS, SaaS OverviewSession 1   IaaS, PaaS, SaaS Overview
Session 1 IaaS, PaaS, SaaS OverviewCode Mastery
 
Loading a data warehouse using ssis 2012
Loading a data warehouse using ssis 2012Loading a data warehouse using ssis 2012
Loading a data warehouse using ssis 2012Code Mastery
 
Exploring, visualizing and presenting data with power view
Exploring, visualizing and presenting data with power viewExploring, visualizing and presenting data with power view
Exploring, visualizing and presenting data with power viewCode Mastery
 
Data Warehouse Design & Dimensional Modeling
Data Warehouse Design & Dimensional ModelingData Warehouse Design & Dimensional Modeling
Data Warehouse Design & Dimensional ModelingCode Mastery
 
Creating a Tabular Model Using SQL Server 2012 Analysis Services
Creating a Tabular Model Using SQL Server 2012 Analysis ServicesCreating a Tabular Model Using SQL Server 2012 Analysis Services
Creating a Tabular Model Using SQL Server 2012 Analysis ServicesCode Mastery
 
Preparing for Windows 8 and Metro
Preparing for Windows 8 and MetroPreparing for Windows 8 and Metro
Preparing for Windows 8 and MetroCode Mastery
 
Extending Your Reach using the Cloud and Mobile Devices
Extending Your Reach using the Cloud and Mobile DevicesExtending Your Reach using the Cloud and Mobile Devices
Extending Your Reach using the Cloud and Mobile DevicesCode Mastery
 

More from Code Mastery (20)

Using SSRS Reports with SSAS Cubes
Using SSRS Reports with SSAS CubesUsing SSRS Reports with SSAS Cubes
Using SSRS Reports with SSAS Cubes
 
Query Tuning for Database Pros & Developers
Query Tuning for Database Pros & DevelopersQuery Tuning for Database Pros & Developers
Query Tuning for Database Pros & Developers
 
Exploring, Visualizing and Presenting Data with Power View
Exploring, Visualizing and Presenting Data with Power ViewExploring, Visualizing and Presenting Data with Power View
Exploring, Visualizing and Presenting Data with Power View
 
Building a SSAS Tabular Model Database
Building a SSAS Tabular Model DatabaseBuilding a SSAS Tabular Model Database
Building a SSAS Tabular Model Database
 
Designer and Developer Collaboration with Visual Studio 2012 and Expression B...
Designer and Developer Collaboration with Visual Studio 2012 and Expression B...Designer and Developer Collaboration with Visual Studio 2012 and Expression B...
Designer and Developer Collaboration with Visual Studio 2012 and Expression B...
 
Build automation best practices
Build automation best practicesBuild automation best practices
Build automation best practices
 
Keynote Rockford Lhotka on the Microsoft Development Platftorm
Keynote   Rockford Lhotka on the Microsoft Development PlatftormKeynote   Rockford Lhotka on the Microsoft Development Platftorm
Keynote Rockford Lhotka on the Microsoft Development Platftorm
 
Session 5 Systems Integration Architectures: BizTalk VS Windows Workflow Foun...
Session 5 Systems Integration Architectures: BizTalk VS Windows Workflow Foun...Session 5 Systems Integration Architectures: BizTalk VS Windows Workflow Foun...
Session 5 Systems Integration Architectures: BizTalk VS Windows Workflow Foun...
 
Session 4 Future of BizTalk and the Cloud
Session 4  Future of BizTalk and the CloudSession 4  Future of BizTalk and the Cloud
Session 4 Future of BizTalk and the Cloud
 
Session 3c The SF SaaS Framework
Session 3c  The SF SaaS FrameworkSession 3c  The SF SaaS Framework
Session 3c The SF SaaS Framework
 
Session 3b The SF SaaS Framework
Session 3b   The SF SaaS FrameworkSession 3b   The SF SaaS Framework
Session 3b The SF SaaS Framework
 
Session 3a The SF SaaS Framework
Session 3a  The SF SaaS FrameworkSession 3a  The SF SaaS Framework
Session 3a The SF SaaS Framework
 
Session 2 Integrating SharePoint 2010 and Windows Azure
Session 2   Integrating SharePoint 2010 and Windows AzureSession 2   Integrating SharePoint 2010 and Windows Azure
Session 2 Integrating SharePoint 2010 and Windows Azure
 
Session 1 IaaS, PaaS, SaaS Overview
Session 1   IaaS, PaaS, SaaS OverviewSession 1   IaaS, PaaS, SaaS Overview
Session 1 IaaS, PaaS, SaaS Overview
 
Loading a data warehouse using ssis 2012
Loading a data warehouse using ssis 2012Loading a data warehouse using ssis 2012
Loading a data warehouse using ssis 2012
 
Exploring, visualizing and presenting data with power view
Exploring, visualizing and presenting data with power viewExploring, visualizing and presenting data with power view
Exploring, visualizing and presenting data with power view
 
Data Warehouse Design & Dimensional Modeling
Data Warehouse Design & Dimensional ModelingData Warehouse Design & Dimensional Modeling
Data Warehouse Design & Dimensional Modeling
 
Creating a Tabular Model Using SQL Server 2012 Analysis Services
Creating a Tabular Model Using SQL Server 2012 Analysis ServicesCreating a Tabular Model Using SQL Server 2012 Analysis Services
Creating a Tabular Model Using SQL Server 2012 Analysis Services
 
Preparing for Windows 8 and Metro
Preparing for Windows 8 and MetroPreparing for Windows 8 and Metro
Preparing for Windows 8 and Metro
 
Extending Your Reach using the Cloud and Mobile Devices
Extending Your Reach using the Cloud and Mobile DevicesExtending Your Reach using the Cloud and Mobile Devices
Extending Your Reach using the Cloud and Mobile Devices
 

Recently uploaded

Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 

Recently uploaded (20)

Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 

Creating Tomorrow’s Web Applications Using Today’s Technologies

  • 1. Creating Tomorrow’s Web Applications Using Today’s Technologies Mike Suarez Senior Consultant email: MikeSu@magenic.com
  • 2. Goals of Presentation » Discuss these Patterns & Technologies: » MVC Pattern » ASP.Net MVC 3 » HTML5 » Modernizr » jQuery » Create an application from scratch that: » Consumes the services created in this morning’s session » Demonstrates the power & ease of use of above technologies
  • 3. MVC & ASP.Net MVC » MVC » The Design Pattern known as Model-View-Controller » ASP .Net MVC 3 » A Framework developed by Microsoft to help facilitate implementation of the MVC Pattern.
  • 4. Model-View-Controller » Been around a long time. » Derived other patterns (i.e. MVP, MVVM) » Has many implementations » Major components: » Model: The Domain (Business Logic) » View: The UI (UI Logic) » Controller: Mediates between the Model & View (Input Logic) » Major benefits: » Better organized code (Separation of concerns) » Unit Testability
  • 5. ASP.Net MVC Framework » Major Components: » Controller - class of Actions, invoked by HTTP requests. » View - HTML mixed with C# (or VB) that gets invoked by an Action, rendered by the View Engine, and displayed by the browser. » Model - an object that encapsulates business logic, data retrieval & data persistence. » Key Features/Benefits: » Routing - Straightforward handling of HTTP requests. » Base Classes – Keep your Controller clean, straightforward. » Convention over Configuration – Simple to implement. » Scaffolding - Reduces time to get development underway. » View Engine – Clean blend of HTML and C#. » Helper Methods – Reduce HTML & saves time.
  • 6. Other concepts you’ll see in the Demo » ViewModels » A class to leverage ASP.Net MVC 3 Model Binding. » Not quite the same as ViewModel in MVVM implementations seen in WPF & SL. » Dependency Injection » Allows Dependencies to be injected into an object at run time. » Will be demonstrated in the controller’s constructor. » Gives us the ability to mock up dependencies for automated unit tests. » Although our implementation doesn’t fully adhere to the Dependency Inversion Principle, ASP.NET MVC 3 contains an IDependencyResolver interface for that. 6
  • 7. What is HTML5? » Goals: » A more stringent set of guidelines for how layout engines implement existing tags/attributes. » An updated set of tags and attributes to allow you to do more with HTML. » Benefits: » Better compatibility among browsers. » Richer web experience. » Onus on browser (layout engine) to implement. » Less coding/dependence on plug-ins 7
  • 8. Modernizr » Reality about HTML5... Great concept, but... » Specification is a “living document”. » No completion date in sight. » Browsers are adopting the specs at different rates. » Therefore » Feel free to use new HTML5 features. » But be prepared that the intended cross browser compatibility is still a ways away. » Modernizr » A lightweight JS library to assist in: » Detecting if certain new features are implemented in the browser your app is running in. » Handling cases where features haven’t been implemented by the browser. 8
  • 9. jQuery » What is jQuery? » THE JavaScript library of JavaScript libraries. » Used by over 55% of the 10,000 most visited websites. » Reasons for Popularity » Provides extensive functionality. » Takes cross browser issues into account. » Allows DOM elements to be “queried” with same ease of CSS selectors. » Drastically reduces the amount of JS code. 9
  • 10. Without further ado… »Lets Start Coding!!! 10