Introduction for Developing Modern Web Applications Workshop

1. Web Development
Introduction to
MODERN WEB
APPLICATIONS

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

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

4. Pillars of Front-end Web Apps 4
WEB BROWSER AS UNIVERSAL CLIENT
HHH
MVVM Framework -
Fireproof JavaScript

5. Pillars of Front-end Web Apps 5
Traditional Web Page
Browser
&
Server
'(
html
First page load
(
html
Form post
)Page Reload

6. Pillars of Front-end Web Apps 6
Single Page Application(SPA)
Browser
&
Server
'(
html
First page load
{}
JSON
Async Request
*
Javascript
Handler

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

8. Living example 8
http://youtu.be/
czKD3w2lbpI

9. Front-end Web Frameworks 9

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

11. Web APIs examples 11
-
.
www.facebook.com
www.twitter.com
www.dropbox.com

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

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

14. 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%).

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

16. 2014 Background 16
73%
55%
{
"name”: “John”,
“email" : “john@mail.com"
}
JSON
Value 3
45%XML
<customer>
<name>John</name>
<email>john@mail.com</email>
</customer>
Reference: [1] http://www.dzone.com/research/guide-to-enterprise-integration
WHICH PROTOCOL ARE YOU MORE COMFORTABLE
WITH?

17. 2014 Background 17
38%OAuth
25%
Haven’t used
either
37% WS-SecurityWS-Security vs. OAuth
WHICH PROTOCOL ARE YOU MORE COMFORTABLE
WITH?

18. 2014 Background 18
82%No
18% Yes
HAVE YOU USED HATEOAS IN YOUR APIs?

19. Comments 19
/
Full Stack Developer RESTFul Web Services
HATEOAS
Web Page
Performance What backend
frameworks are you using?
CORS

20. Contact
FABRICIO EPAMINONDAS
0 linkedin.com/in/fabricioepa
1 fabricioepa.wordpress.com
. @fabricioepa