Overview of Web Application Development - Web Technologies I.tothzs/edu/... · Overview of Web...

Overview of Web Application DevelopmentWeb Technologies I.

Zsolt Tóth

University of Miskolc

2018

Zsolt Tóth (University of Miskolc) Web Apps 2018 1 / 34

Overview Architecture

Table of Contents

1 OverviewArchitectureComponent–based DevelopmentModel View Controller

2 Back–endProgramming LanguagesServer Side Components

3 Front–endProgramming LanguagesSingle Page Applications

4 Tutorials



Client–Server ModelSimple Model

Clients request servicesServer waits for and serversrequests

Widely usedFTP, SSHWWW, SMTP

CentralizedWeb Applications

Information SystemsSearch EnginesSocial MediaWeb Shopse–Governmente–BankingMonitoring Systems



N–tier ArchitectureDetailed than Client–ServerModelTiers are not LayersTiers have specific functions,purposeTypical tiers

PresentationClient–sideWeb sitesMobile / Desktopapplications

BusinessServer–sideBusiness logic

DatabaseServer–sideNot available directly.



Pesentation Tier

Front–endSend requests, use servicesVisualize responseRun on client sideUser Interface

text, tables, listsimages, chartsaudio, video

Controlsbutton, text field,checkbox radio–buttondrop–down list

Web ApplicationsThin clientOnly visualizationClient–side checking!

Desktop ApplicationsThick clientInstalling, updating?

MobileThin or thick clientBrowser vs native applicationDifferent display



Business Tier

Back–endServer–sideProvides servicesHandle internal exceptionsSeems to be a hugemonolithic application but

it may be made ofsub–systemssub–systems are built fromcomponents

Componentsmodel – Domain classes,POJOspersist – Storage, JDBC,myBatis, Hybernate, etc.service – High levelfunctions, Use–Casecontroller – Handle HTTPrequests, sanitize input data



Database Tier

Storage of business objectsChangeability of the storageimplementationSeparated from business tierWell-known trustedtechnologies are usedData is accessed via3rd–party APIs

DMBSOracle, DB2, MS SQL ServerMySQL, PostgreSQLDatabase expert is required!

NoSQLMongoDBNeo4j

File SystemCustom directory hierarchySecurity issues


Overview Component–based Development

Terms

sub–system A part of the entire system that provide a well–definedfunctionality.

module A development unit that has a well–defined purpose.Modules are identified by their name.

component A module used by another module.artifact A specific version of a module. A module with a version

number.

These terms are slightly different. During the course, we will stick tothese definitions. Do not mix them.



Modules, ComponentsTests

UnitComponentIntegration

DependenciesBuild processDeployment

Version numbermajor.minor.build.revisionalpha, beta, releasecandidate, commercialdistributionNever use multiple versionof the same module!



Interface–based Programming

Decouple componentsLoose couplingExchangeable componentsEase design anddevelopment

Separates definition andimplementationDefines expected behavior

return typeparametersexceptionsdocumentation



BenefitsComplex tasks can be brokendownIncrease re–usabilitySimplify tasks

Separate differentprogramming languagetoolstechnologies

Divide and Conquer!



Tools – Maven

Applicationmvn <goal>Eclipse plugin

Packagingpomjar, war

Project Structuresrc

maintest

targetpom.xml

groupId, artifactId,version

Build tool

1 validate2 compile3 test4 package

5 integration-test

6 verify7 install8 deploy

Dependency managerRepository

1 local ~/.m22 company (Neuxs)3 global (www.maven.org)


Overview MVC

Model View Controller

Architectural Pattern (1970)User Interface ImplementationDesktop Applications

traditionallyWeb Applications

popular

VariantsMVP Model–View–

PersenterMVA Model–View–

AdapterMVVM Model–View–

Viewmodel


Overview MVC

Model

Domain ObjectsPOJOsBeans

public getter / settermethodspublic default constructor

Describe the Structure of theEntities

Business LogicProcessesTasksCalculationsRules

PersistenceDatabaseFile SystemText or binary files


Overview MVC

View

Visualize model objectsShown to the userDifferent representations

FormsTablesCharts

Capture user interaction

User InterfaceButtonsText fieldsLabelsImagesCheck boxRadio buttonDrop–down lists


Overview MVC

Controller

Connects Model and ViewInvoke Business ServicesTransform user interactionsUpdate View


Back–end

Table of Contents




4 Tutorials


Back–end Programming Languages

Common Gateway Interface

CGI Program / ScriptPHP, CGenerate HTML

Started by the Web ServerCreate process per HTTPRequestsCostly



Script Languages

PHPMost popular

Local companies use it.Frameworks

YiiContent ManagementSystems

JoomlaWordPress

Easy–to–startSupported by web serverhosting companiesWikipedia

PythonHigh–level, general purposelanguagePopular but not in MiskolcEasy–to–LearnGoogle, Youtube

RubyRuby on Rails FrameworkNot popular in MiskolcTwitter



Object Oriented Languages

Web ApplicationsComplex,Reliable,Stable

Expensive InfrastructureComponents can beseparated easilyGood, well-tested code(hopefully ,)

DevelopmentSlowStandardized

Fixed rolesMethodologies

DifficultIf you do it well ,Lots of technology

Both Java and C# are used bylocal companies

You will learn about it in details at the "Web Application Development inJava" course.

In this course you will use an existing Java based web application.


Back–end Server Side Components

Overview



model & util

util

General, common functionsLogging

model

Domain objectsPOJOsNo beansExceptions related to theDomain



persist & persit-mysql

persist

Data Access ObjectsInterfacesExceptions related toPersistence

Existing objectNot foundPermission Denied. . .

Do NOT related database!Defines

functiontaskNOT implementation

persist-mysql

May be merged into persist

MySQL specificimplementationArbitrary technologies

JDBCHibernateMyBatis

Alternativespersist-oraclepersist-postgrepersist-xmlpersist-filesystem



service & service-impl

service

Interfaces for High–LevelFunctionsExceptionProcesses, TasksUse–Case

service-impl

Can be merged int serviceUse DAOs via Interfacepersist



controller

Connect services and viewMap services to URLConvert HTTP Requests /Responses

ParametersStatus codes

Conversion between businessand value objects.

Server uses Java ObjectsHTTP is text based

Sanitize input data

Java EEServletsSpringDispatcher ServletStatic content ???Endpoint reference ,



Data Transfer Object

Model object cannot bepublished.

may contain sensitive datanot beans

DTOs are beansJSON

Have no business logicSimplify the requests

Defines complex,composite structuresOne parameter can beenough

AssemblerMapping between businessobjects and DTOsCapture the rules and logic

{"employees":[{"firstName":"John","lastName":"Doe"},{"firstName":"Anna","lastName":"Smith"},

]}


Front–end

Table of Contents




4 Tutorials


Front–end Programming Languages

HTML

Plain textMarkup LanguageInterpreted and visualized bythe BrowserStructural elements

divisionsparagraphsimagestableslistsforms

<html><head><title>Page Title</title></head><body>

<h1>This is a Heading</h1><p>This is a paragraph.</p>

</body></html>



CSS

Cascaded Style Sheets1 Browser2 External3 Internal4 In–line

Defines the appearanceText basedCSS pre–processors

less.jsSASSStylus

TemplatesBootstrap

body {background: blue;

}

h1 {color: white;text-align: center;

}

p {font-family: verdana;font-size: 20px;

}



JavaScript

Client side programmingDynamic behaviorScript LanguageInterpreted by the BrowserEvent handlers

ButtonsonLoad

AJAXFrameworks

AngularJSTypeScript

document.getElementById("demo").innerHTML= "Hello JavaScript";


Front–end Single Page Applications

Single Page ApplicationsSeparate pages

Independent HTML pages+ Easy–to–create- Multiple pages- Redundancy- Huge network traffic

Modular SiteAJAXPage Fragments

+ No redundancy+ Moderate network traffic- HTML fragments- Re-usability

Single Page ApplicationsAJAXJSON / XML MessagesWide–range of client

+ Low Internet Traffic+ Re–usable components+ Loose coupling- Client–side computation- Not so easy–to–learn


Tutorials

Table of Contents




4 Tutorials


Tutorials

Goal

Develop front–end for anexisting web applications!

HTMLCSSJavaScriptAJAX

"Real" work environmentPractice current technologies

BasicsAdvanced technologies in"Web Technologies II"course

PrerequisitesLinuxbashWebStromgit, gitHub


Tutorials

Q&A

Can I practice at home?Yes. You will learn it in the 1st tutorial.

I don’t know a technology. What can I do?You should have learned about each technology. Requiredtechnologies will be summarized in tutorials.

I have got a problem with something. How can I solve it?Troubleshooting checklist

1 Read the error message2 Google it3 Ask your

1 friends2 classmates3 tutor


Overview of Web Application Development - Web Technologies I.tothzs/edu/... · Overview of Web...

Documents

Transcript of Overview of Web Application Development - Web Technologies I.tothzs/edu/... · Overview of Web...