Advancedd Web ApplicatioDesign Patter
Rupak Raj GhiP th IT S t PPratham IT System Pv
• #ComputerEngineer #Soft
• Education:‐ #ME‐CE (KU)
• Experience:‐ 6 yrs.Experience: 6 yrs.• Bee IT System, Departmen(GoN), Softech Foundation
• Expertise: #.NET #PHP #A
• ProjectsProjects
• Research Field• Text‐to‐Speech Synthesis Text‐to‐Speech Synthesis
Advanced Web Application
BiotwareEngineer #Developer
nt of Land Information and Archive n, PITS
Android #JS
for Nepali Languages for Nepali Languages
Jan 8, 2014
St
• I assume, audience alread,
• HTML
• CSS• CSS
• JavaScript
• Programming Language
• Web Server
• How Web site works?
Advanced Web Application
tartupp
dy have an idea ony
es
Jan 8, 2014
Agg
• Website and Web‐applicatpp
• Web‐application Architect
• M d W b A D l• Modern Web Apps Develo
• Modern Tools for Web App
• How to start a carrier?
Advanced Web Application
gendag
tions
tural Patterns
opment
ps
Jan 8, 2014
Website andWebsite and
• Dif
• Co
• La• La
Advanced Web Application
d Web‐Appsd Web Apps
fferences
omponents
ng agesnguages
Jan 8, 2014
Website vs. W
Advanced Web Application
Web Applicationpp
Jan 8, 2014
Web Applicatpp
My‐SQLMs‐SQLOracle
ApacheIIS
PostGreSQLSqLite
IISTomcat
Glass FishRails
Advanced Web Application
tion Componentsp
Jan 8, 2014
Programming Weg g
Client Side Front EndClient Side – Front End
• JavaScript and JS Frameworks,
• JQuery,
• Dojo,
h• Sencha , etc…
• Flash,
il li h• Silverlight, etc….
Advanced Web Application
b Apps? – No problempp p
Server Side Back EndServer Side – Back End• PHP,
• .NET (ASP.NET, C#),
• Java (JSP, Servlets, Applets),
• C/C++• C/C++,
• Python,
• Ruby on Rails,Ruby on Rails,
• Perl, etc…
Jan 8, 2014
What most populap p
http://en.wikipedia.org/wiki/Advanced Web Application
ar websites are using?g
/Programming_languages_used_in_most_popular_weJan 8, 2014
Architecture of MArchitecture of M
• Client‐
• Tier‐Ar
• Ser ice• Service
• MVC (M
Advanced Web Application
Modern Web AppsModern Web Apps
‐Server
rchitecture
e Oriented Architect re(SOA)e Oriented Architecture(SOA)
Model‐View‐Controller)
Jan 8, 2014
Client‐Serv
• Simple but widely used inp y
Advanced Web Application
er Architecture
n networked environment
DatabaseDatabaseFileFileEmailEmailSMSSMSSMSSMS
Jan 8, 2014
Tier Ar• Client–server architecture in which
t ti li ti ipresentation, application processing,and data managementfunctions are logically separated
• Separation of concerns
• ReusabilityReusability
• Interoperability
Advanced Web Application
rchitecture
Jan 8, 2014
Tier tools
Advanced Web Application
s/Languages/ g g
Jan 8, 2014
Service Orien• Being used for interoperability
• Eg.g
• Banking(Utility bills)
• Telecomm• Telecomm.
Advanced Web Application
nted Architecture
Jan 8, 2014
Current Trend i
• MVC ‐Model View Contro
Advanced Web Application
in web apps ‐MVCpp
ller
Jan 8, 2014
MVC – Ho
• Model: Handle the backenDatabases
• View: Presentation to UseView: Presentation to Use
• UI
• Controller
• Mediator between User, Model and View
Advanced Web Application
ow it works?
nd
ers ers
Jan 8, 2014
MVC‐T
• Testable Coding Patternsg
• Easy to test the applicatio
• U it T ti• Unit Testing
• Integration Testing
• System Testing
Advanced Web Application
Testability y
ons
Jan 8, 2014
MVC‐ Separap
• The process of breaking ap gfeatures that overlap in fu
• Improves code clarity anImproves code clarity an
•Helps troubleshooting b
•Allows for multiple team
Advanced Web Application
ation of Concerns
computer program into distincp p gunctionality as little as possible
nd organizationnd organization
by isolating issues
ms to develop simultaneously
Jan 8, 2014
MVC‐Cod
• Shortens developmentp
• Code Libraries
•Design Patterns
• FrameworksFrameworks
Advanced Web Application
de Reusabilityy
Jan 8, 2014
MVC‐ Ex
• Modularized through plugg p g
• Easy to add New
• M d l Vi d C t l• Model, View and Control
Advanced Web Application
xtensibilityy
ginsg
llller
Jan 8, 2014
Modern Web ApModern Web Ap
• Cu
• Ca
Advanced Web Application
pp Developmentpp Development
urrent Trends
arrier Startup
Jan 8, 2014
Trends‐O
• Lots of tools are available
• Most of the web tools and• http // codeple com• http://www.codeplex.com
• http://www.github.com/
• You Can, Download them
• Only need to attribute th
Advanced Web Application
Open Sourcep
e in web
d techniques are Openm/m/
m and use as per your need
he author, no more..
Jan 8, 2014
Trends‐ F
• JavaScript (Sencha, Jquerp ( , q
• HTML (JqueryUI)
• D b (E i F• Database (Entity Framew
• Programming (ASP.MVC,
• Makes your life easier
Advanced Web Application
Frameworks
ry, etc..)y, )
k Hib )work, Hibernate etc.)
CodeIgniter(PHP) etc.)
Jan 8, 2014
Trends‐ JS, UI &,
• JQuery: Write less do mory• http://jquery.com/
• HTML (JQueryUI)HTML (JQueryUI)
• BootStrap (HTML5 and CS• htt // tb t t• http://getbootstrap.com
• On the fly Testing• Testing makes easier
• http://jsfiddle.net/
Advanced Web Application
& CSS Frameworks
re
SS)/m/
Jan 8, 2014
Trends‐Cros
• Same apps for Desktop, Lpp p,
• Same apps for
• A d id Wi d d iO• Android, Windows and iO
• Developed using Cross pla
• Tools: PhoneGap, Cordo
• Frameworks: JQM, SencFrameworks: JQM, Senc
Advanced Web Application
ss Platform Appspp
Laptop, Tablet, Mobile etc.p p, ,
OSOS
atform development engines
va etc…
ha etc…ha etc…
Jan 8, 2014
Trends‐ P• Multiple languages for sam
• Server Side• ASP.NET (MVC & Web API)
• PHP (CodeIgniter)
• JAVA (Spring)
• NodeJS
• Python (Dijango)
• Client Side• JS, HTML5 and CSS3
Advanced Web Application
Programmingg ge apps
Jan 8, 2014
Carrier on W
• Job: No problem, lots of op ,
• Earning: Depends on skill,
• H ?• How?
• Start learning today
Advanced Web Application
Web Developer….p
openingsp g
, performance and dedication
Jan 8, 2014
Usef• http://www.codecademy.com/
• https://www.codeschool.com/
• https://www.udacity.com/
• http://www.codeproject.com/Articlehttp://www.codeproject.com/Articlestep‐by‐step‐in‐7
• http://www.youtube.com/playlist?lis
• http://mvc4beginner com/http://mvc4beginner.com/
• http://www.w3schools.com/aspnet/m
• http://jsfiddle.net/
• http://getbootstrap.com/
• http://jquery.com/
Advanced Web Application
ful links
es/207797/Learn‐MVC‐Model‐View‐Controllees/207797/Learn MVC Model View Controlle
st=PL6n9fhu94yhVm6S8I2xd6nYz2ZORd7X2
mvc_intro.asp
Jan 8, 2014
Need
• Contact me
• Email: rughimire@gmai
Advanced Web Application
d a help ?p
l.com
Jan 8, 2014
Tha
Advanced Web Application
ank youy
Jan 8, 2014