20
Web Development Introduction to MODERN WEB APPLICATIONS

Introduction to developing modern web apps

Embed Size (px)

Citation preview

Page 1: Introduction to developing modern web apps

Web DevelopmentIntroduction to MODERN WEB APPLICATIONS

Page 2: Introduction to developing modern web apps

History 2

1991 First web page created by Tim Berners accessed by web browser.

1990s Java Applets, Flash, JavaScript, Web Hosting, Dynamic Web Sites.

2000s Ajax, Cloud Computing (PaaS, SaaS), Web Apps, Google, Web 2.0

2010s HTML5 Era, Modern Browsers, High-end mobile devices, Big Data,

NoSql, Microservices…

Page 3: Introduction to developing modern web apps

Product segmentation 3

!

Smart phone Native Apps, Mobile

Browser, HTML5 Client

"

Tablet Office Apps, Mobile

Browser, Streaming Apps

Q

PC Web Browsers, Desktop Apps, Cloud Storage Client

#

Cloud Storage Dropbox, OneDrive,

GoogleDrive

Location services Maps, Navigation,

Point of Interest

%

Web APIs Web Search, Social Networking, Open authentication.

&

Frontend vs. Backend

Page 4: Introduction to developing modern web apps

Pillars of Front-end Web Apps 4

WEB BROWSER AS UNIVERSAL CLIENT

HHH

MVVM Framework -

Fireproof JavaScript

Page 5: Introduction to developing modern web apps

Pillars of Front-end Web Apps 5

Traditional Web Page

Browser

&

Server

'( html

First page load

( html

Form post)Page Reload

Page 6: Introduction to developing modern web apps

Pillars of Front-end Web Apps 6

Single Page Application(SPA)

Browser

&

Server

'( html

First page load

{} JSON

Async Request*

Javascript Handler

Page 7: Introduction to developing modern web apps

Pillars of Front-end Web Apps 7

• Content Delivery Network(CDN)

• Javascript REST Client • Responsive Web Page

• Async Network Operations • Offline User Interactions

• Responsive Web Design (RWD)

Page 8: Introduction to developing modern web apps

Living example 8

http://youtu.be/czKD3w2lbpI

Page 9: Introduction to developing modern web apps

Front-end Web Frameworks 9

Page 10: Introduction to developing modern web apps

Notification System

'

Third-party API

'

Web API as a product 10

• Multiple client plaftorms

Backend

'

End-user App

+

Test Agent

,

• Easy to integrate with new applications and protocols • Fast development of new products• Branding, partnership and innovation • Monetize: Pay as you go, subscriptions…

Page 11: Introduction to developing modern web apps

Web APIs examples 11

-

.

www.facebook.com

www.twitter.com

www.dropbox.com

Page 12: Introduction to developing modern web apps

Good practices for Web API Design 12

• Documentation • API Test • Security

• Public / private domain • CORS(Cross-Origin Resource Sharing)

• Flexibility • Protocolos and Formats

• Stability • Versioning • Backward compatibility

• Simplicity and adoption

Page 13: Introduction to developing modern web apps

13

Reference: [1] http://www.dzone.com/research/guide-to-enterprise-integration

2014 Background

28%48%

DZone’s 2014 Enterprise Integration Survey 2014

• The majority of respondents are headquartered in Europe (48%) or the US (28%).

• More than 500 it professionals responded to DZone’s 2014 Enterprise Integration Survey.

Page 14: Introduction to developing modern web apps

2014 Background 14

Reference: [1] http://www.dzone.com/research/guide-to-enterprise-integration

• Developers (45%) and development team leads (30%) were the most common roles.

• 69% of respondents come from large organizations (100 or more employees) and 31% come from small organizations (under 100 employees).

• over half of the respondents (70%) have over 10 years of experience as it professionals.

• A large majority of respondents’ organizations use Java (94%). JavaScript is the next highest (47%).

Page 15: Introduction to developing modern web apps

2014 Background 15

BI/Analytics

55%

CRM

51%

DOCUMENT MANAGEMENT

50%

ERP

47%

MOST COMMON SYSTEM INTEGRATIONS

Reference: [1] http://www.dzone.com/research/guide-to-enterprise-integration

Page 16: Introduction to developing modern web apps

2014 Background 16

73%

55%

{

"name”: “John”,

“email" : “[email protected]"

}

JSON

Value 3

45%XML

<customer>

<name>John</name>

<email>[email protected]</email>

</customer>

Reference: [1] http://www.dzone.com/research/guide-to-enterprise-integration

WHICH PROTOCOL ARE YOU MORE COMFORTABLE WITH?

Page 17: Introduction to developing modern web apps

2014 Background 17

38%OAuth

25%Haven’t used

either

37% WS-SecurityWS-Security vs. OAuth

WHICH PROTOCOL ARE YOU MORE COMFORTABLE WITH?

Page 18: Introduction to developing modern web apps

2014 Background 18

82%No

18% Yes

HAVE YOU USED HATEOAS IN YOUR APIs?

Page 19: Introduction to developing modern web apps

Comments 19

/

Full Stack Developer RESTFul Web Services

HATEOAS

Web Page Performance What backend

frameworks are you using?

CORS

Page 20: Introduction to developing modern web apps

Contact

FABRICIO EPAMINONDAS 0 linkedin.com/in/fabricioepa

1 fabricioepa.wordpress.com

. @fabricioepa