Introduction to developing modern web apps
1 like1,843 views
This document provides an overview of modern web applications, including their history and key pillars. It discusses the evolution of web applications from early static pages in the 1990s to today's single page applications that make asynchronous requests to backends. It also covers important front-end concepts like content delivery networks, JavaScript frameworks, and responsive design. Examples of popular web APIs are given and best practices for API design are outlined.
![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.](https://image.slidesharecdn.com/introductiontodevelopingmodernwebapps-150130154803-conversion-gate01/85/Introduction-to-developing-modern-web-apps-13-320.jpg)
![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%).](https://image.slidesharecdn.com/introductiontodevelopingmodernwebapps-150130154803-conversion-gate01/85/Introduction-to-developing-modern-web-apps-14-320.jpg)
![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](https://image.slidesharecdn.com/introductiontodevelopingmodernwebapps-150130154803-conversion-gate01/85/Introduction-to-developing-modern-web-apps-15-320.jpg)
![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?](https://image.slidesharecdn.com/introductiontodevelopingmodernwebapps-150130154803-conversion-gate01/85/Introduction-to-developing-modern-web-apps-16-320.jpg)
Introduction to developing modern web apps
- 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)
- 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" : “[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?
- 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