Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
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
Zsolt Tóth (University of Miskolc) Web Apps 2018 2 / 34
Overview Architecture
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
Zsolt Tóth (University of Miskolc) Web Apps 2018 3 / 34
Overview Architecture
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.
Zsolt Tóth (University of Miskolc) Web Apps 2018 4 / 34
Overview Architecture
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
Zsolt Tóth (University of Miskolc) Web Apps 2018 5 / 34
Overview Architecture
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
Zsolt Tóth (University of Miskolc) Web Apps 2018 6 / 34
Overview Architecture
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
Zsolt Tóth (University of Miskolc) Web Apps 2018 7 / 34
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.
Zsolt Tóth (University of Miskolc) Web Apps 2018 8 / 34
Overview Component–based Development
Modules, ComponentsTests
UnitComponentIntegration
DependenciesBuild processDeployment
Version numbermajor.minor.build.revisionalpha, beta, releasecandidate, commercialdistributionNever use multiple versionof the same module!
Zsolt Tóth (University of Miskolc) Web Apps 2018 9 / 34
Overview Component–based Development
Interface–based Programming
Decouple componentsLoose couplingExchangeable componentsEase design anddevelopment
Separates definition andimplementationDefines expected behavior
return typeparametersexceptionsdocumentation
Zsolt Tóth (University of Miskolc) Web Apps 2018 10 / 34
Overview Component–based Development
BenefitsComplex tasks can be brokendownIncrease re–usabilitySimplify tasks
Separate differentprogramming languagetoolstechnologies
Divide and Conquer!
Zsolt Tóth (University of Miskolc) Web Apps 2018 11 / 34
Overview Component–based Development
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)
Zsolt Tóth (University of Miskolc) Web Apps 2018 12 / 34
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
Zsolt Tóth (University of Miskolc) Web Apps 2018 13 / 34
Overview MVC
Model
Domain ObjectsPOJOsBeans
public getter / settermethodspublic default constructor
Describe the Structure of theEntities
Business LogicProcessesTasksCalculationsRules
PersistenceDatabaseFile SystemText or binary files
Zsolt Tóth (University of Miskolc) Web Apps 2018 14 / 34
Overview MVC
View
Visualize model objectsShown to the userDifferent representations
FormsTablesCharts
Capture user interaction
User InterfaceButtonsText fieldsLabelsImagesCheck boxRadio buttonDrop–down lists
Zsolt Tóth (University of Miskolc) Web Apps 2018 15 / 34
Overview MVC
Controller
Connects Model and ViewInvoke Business ServicesTransform user interactionsUpdate View
Zsolt Tóth (University of Miskolc) Web Apps 2018 16 / 34
Back–end
Table of Contents
1 OverviewArchitectureComponent–based DevelopmentModel View Controller
2 Back–endProgramming LanguagesServer Side Components
3 Front–endProgramming LanguagesSingle Page Applications
4 Tutorials
Zsolt Tóth (University of Miskolc) Web Apps 2018 17 / 34
Back–end Programming Languages
Common Gateway Interface
CGI Program / ScriptPHP, CGenerate HTML
Started by the Web ServerCreate process per HTTPRequestsCostly
Zsolt Tóth (University of Miskolc) Web Apps 2018 18 / 34
Back–end Programming Languages
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
Zsolt Tóth (University of Miskolc) Web Apps 2018 19 / 34
Back–end Programming Languages
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.
Zsolt Tóth (University of Miskolc) Web Apps 2018 20 / 34
Back–end Server Side Components
model & util
util
General, common functionsLogging
model
Domain objectsPOJOsNo beansExceptions related to theDomain
Zsolt Tóth (University of Miskolc) Web Apps 2018 22 / 34
Back–end Server Side Components
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
Zsolt Tóth (University of Miskolc) Web Apps 2018 23 / 34
Back–end Server Side Components
service & service-impl
service
Interfaces for High–LevelFunctionsExceptionProcesses, TasksUse–Case
service-impl
Can be merged int serviceUse DAOs via Interfacepersist
Zsolt Tóth (University of Miskolc) Web Apps 2018 24 / 34
Back–end Server Side Components
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 ,
Zsolt Tóth (University of Miskolc) Web Apps 2018 25 / 34
Back–end Server Side Components
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"},
]}
Zsolt Tóth (University of Miskolc) Web Apps 2018 26 / 34
Front–end
Table of Contents
1 OverviewArchitectureComponent–based DevelopmentModel View Controller
2 Back–endProgramming LanguagesServer Side Components
3 Front–endProgramming LanguagesSingle Page Applications
4 Tutorials
Zsolt Tóth (University of Miskolc) Web Apps 2018 27 / 34
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>
Zsolt Tóth (University of Miskolc) Web Apps 2018 28 / 34
Front–end Programming Languages
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;
}
Zsolt Tóth (University of Miskolc) Web Apps 2018 29 / 34
Front–end Programming Languages
JavaScript
Client side programmingDynamic behaviorScript LanguageInterpreted by the BrowserEvent handlers
ButtonsonLoad
AJAXFrameworks
AngularJSTypeScript
document.getElementById("demo").innerHTML= "Hello JavaScript";
Zsolt Tóth (University of Miskolc) Web Apps 2018 30 / 34
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
Zsolt Tóth (University of Miskolc) Web Apps 2018 31 / 34
Tutorials
Table of Contents
1 OverviewArchitectureComponent–based DevelopmentModel View Controller
2 Back–endProgramming LanguagesServer Side Components
3 Front–endProgramming LanguagesSingle Page Applications
4 Tutorials
Zsolt Tóth (University of Miskolc) Web Apps 2018 32 / 34
Tutorials
Goal
Develop front–end for anexisting web applications!
HTMLCSSJavaScriptAJAX
"Real" work environmentPractice current technologies
BasicsAdvanced technologies in"Web Technologies II"course
PrerequisitesLinuxbashWebStromgit, gitHub
Zsolt Tóth (University of Miskolc) Web Apps 2018 33 / 34
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
Zsolt Tóth (University of Miskolc) Web Apps 2018 34 / 34