advanced web applicatio - wordpress.com · 2014-04-23 · advanced web applicatio design patter...

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