front-end architecture for cloud applications and polymer
TRANSCRIPT
Front-end architecture for Cloud Applications and
PolymerFeb 2017
Rick Jang
Concurrent Web Usability
One Page N-ScreenResponsive
DynamicReal-time
Writing One Page Web AppProblems: One Page Web App Low Cohesion and High Coupling
<style> style for A style for B style for C</style>
<html> element for A element for B element for C</html>
<script> script for A script for B script for C</script>
Polymer: Web Component FrameworkPolymer: W3C standard for Web Components
• Provides Cohesive Component Model• Component Composition by HTML markup• Dynamic Data Binding• Responsive Web by Material Design• Standard
• Google maintains it
Polymer: Web Component FrameworkPolymer: W3C standard for Web Components
<style> style for A style for B style for C</style>
<html> element for A element for B element for C</html>
<script> script for A script for B script for C</script>
#A.html<style> style for A</style>
<html> element for A</html>
<script> script for A</script>
#B.html<style> style for B</style>
<html> element for B</html>
<script> script for B</script>
#C.html<style> style for C</style>
<html> element for C</html>
<script> script for C</script>
#index.html<A><B><C>
Polymer: Web Component FrameworkMicro-service mashup tool and framework in visual way
Polymer: Web Component FrameworkPolymer
Demo
Web Component FrameworkConclusion - Why Web Components (Polymer) ?
1. Standard 2. Tons of components developers contributed out there3. Provides nice design tool. 4. Compatible with existing web and AngularJS too.
5. Beautiful and Google hosts it.
Role of Front-endSeparation of UI and Logic - General Monolithic Architecture
Front-end
Back-end(Java)
DB File System (S3)
Front-end
Image Server(Python)
Business Logic Server(Java)
Extended Role of Front-end in Cloud ApplicationsAggregator for multiple (polyglot programmed) micro-services
Component Service
(C)
AJAX, RESTful
Concurrent Cloud Applications are composed of multiple Micro Services and front-end serves as an aggregator of the services
Extended topic - API Gateway
(Human)Front-end
ServiceService
API G/W
Service
Service
We need API Gateway for aggregating, forwarding services and exposing composite APIs
Tenant-Specific Routing
(Machine)Third-party Apps
Extended topic - Billing
(Human)Front-end
ServiceService
API G/W
Service
Service
We need API Gateway for aggregating, forwarding services and exposing composite APIs
Tenant-Specific Billing
(Machine)Third-party Apps
Billing
Extended topic – IAM
(Human)Front-end
ServiceService
API G/W
Service
Service
Stateless 인증 , 통합빌링을 위한 IAM
Tenant-Specific Billing
(Machine)Third-party Apps
BillingIAM token provider
OCE Software for Cloud Front-end
• Polymer-Java Mapping UI Framework• IAM Server based on OAuth 2.0• API Gateway APIGee, Kong
• uEngine Billing (killbill based)
Polymer-Java Mapping - MetaworksMetaworks: Polymer-Java Mapping by OCE
References
• https://www.polymer-project.org/• https://polymer-designer.appspot.com/• http://
www.slideshare.net/wso2.org/workshop-ap-idayssydneyarchitectenterpriseapimanagementstrategymifancareem• https://
github.com/TheOpenCloudEngine/polymer-java-mapping• https://github.com/TheOpenCloudEngine/OCEIAM-SERVICE
WARRPER• https://github.com/TheOpenCloudEngine/oceIAM