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?


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?


gendag

tions

tural Patterns

opment

ps

Jan 8, 2014

Website andWebsite and

• Dif

• Co

• La• La


d Web‐Appsd Web Apps

fferences

omponents

ng agesnguages

Jan 8, 2014

Website vs. W


Web Applicationpp

Jan 8, 2014

Web Applicatpp

My‐SQLMs‐SQLOracle

ApacheIIS

PostGreSQLSqLite

IISTomcat

Glass FishRails


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….


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


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


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


rchitecture

Jan 8, 2014

Tier tools


s/Languages/ g g

Jan 8, 2014

Service Orien• Being used for interoperability

• Eg.g

• Banking(Utility bills)

• Telecomm• Telecomm.


nted Architecture

Jan 8, 2014

Current Trend i

• MVC ‐Model View Contro


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


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


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


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


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


xtensibilityy

ginsg

llller

Jan 8, 2014

Modern Web ApModern Web Ap

• Cu

• Ca


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


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


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/


& 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


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


Programmingg ge apps

Jan 8, 2014

Carrier on W

• Job: No problem, lots of op ,

• Earning: Depends on skill,

• H ?• How?

• Start learning today


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/


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


d a help ?p

l.com

Jan 8, 2014

Tha


ank youy

Jan 8, 2014

Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter...

Documents

Transcript of Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter...