Comparing Web Frameworks; Struts, Spring Mvc, Webwork, Tapestry & Jsf
JSF 2.3: Integration with Front-End Frameworks
-
Upload
ian-hlavats -
Category
Technology
-
view
568 -
download
2
description
Transcript of JSF 2.3: Integration with Front-End Frameworks
![Page 1: JSF 2.3: Integration with Front-End Frameworks](https://reader033.fdocuments.us/reader033/viewer/2022061206/5476e0acb4af9f321d8b458a/html5/thumbnails/1.jpg)
Text
JSF 2.3Responsive Web Design + Single-Page Applications by Ian Hlavats
![Page 2: JSF 2.3: Integration with Front-End Frameworks](https://reader033.fdocuments.us/reader033/viewer/2022061206/5476e0acb4af9f321d8b458a/html5/thumbnails/2.jpg)
Industry Trends
Rise of Front-End Frameworks
Responsive Web Design (Bootstrap, Foundation)
Single Page Applications (AngularJS, Ember.js)
![Page 3: JSF 2.3: Integration with Front-End Frameworks](https://reader033.fdocuments.us/reader033/viewer/2022061206/5476e0acb4af9f321d8b458a/html5/thumbnails/3.jpg)
ResponsiveWeb Design• Flexible grid system• Adapts to device• Mobile-first approach
![Page 4: JSF 2.3: Integration with Front-End Frameworks](https://reader033.fdocuments.us/reader033/viewer/2022061206/5476e0acb4af9f321d8b458a/html5/thumbnails/4.jpg)
Bootstrap /Foundation• Bootstrap is #1
project on GitHub• Cross-browser RWD• SASS/LESS support• Reusable UI
components
![Page 5: JSF 2.3: Integration with Front-End Frameworks](https://reader033.fdocuments.us/reader033/viewer/2022061206/5476e0acb4af9f321d8b458a/html5/thumbnails/5.jpg)
Next-Gen CSS
• Pre-processors• Variables• Functions• Mixins• Better syntax• Modular
organization
![Page 6: JSF 2.3: Integration with Front-End Frameworks](https://reader033.fdocuments.us/reader033/viewer/2022061206/5476e0acb4af9f321d8b458a/html5/thumbnails/6.jpg)
Single Page Applications (SPA)
One top-level HTML page (template)
Many partial HTML pages loaded via DOM changes
Client-side MVC with JavaScript API
JSON/REST based on thin-server architecture
![Page 7: JSF 2.3: Integration with Front-End Frameworks](https://reader033.fdocuments.us/reader033/viewer/2022061206/5476e0acb4af9f321d8b458a/html5/thumbnails/7.jpg)
Enhanced HTML with custom elements and attributes
Modular architecture
Models, views, controllers, services, factories, filters, …
Two-way data binding
Custom directives for reusable UI components
AngularJS
![Page 8: JSF 2.3: Integration with Front-End Frameworks](https://reader033.fdocuments.us/reader033/viewer/2022061206/5476e0acb4af9f321d8b458a/html5/thumbnails/8.jpg)
Transpiler Languages
Object-oriented
Support interfaces, classes, generics, inheritance
Type-safe
Modular
Compile to JavaScript
![Page 9: JSF 2.3: Integration with Front-End Frameworks](https://reader033.fdocuments.us/reader033/viewer/2022061206/5476e0acb4af9f321d8b458a/html5/thumbnails/9.jpg)
Grunt task runnerModular build tool based on Node.js
Compiles TypeScript to JavaScript
Runs Karma unit tests, JSHint static analyzer
Optimizes assets for production
![Page 10: JSF 2.3: Integration with Front-End Frameworks](https://reader033.fdocuments.us/reader033/viewer/2022061206/5476e0acb4af9f321d8b458a/html5/thumbnails/10.jpg)
Bower
Dependency manager for JavaScript libraries
Searchable registry to find and download common libraries
Assumes all libraries are available in public/private Git repos
Looks for bower.json to declare dependencies
![Page 11: JSF 2.3: Integration with Front-End Frameworks](https://reader033.fdocuments.us/reader033/viewer/2022061206/5476e0acb4af9f321d8b458a/html5/thumbnails/11.jpg)
Great, so what does this all mean for JSF?
![Page 12: JSF 2.3: Integration with Front-End Frameworks](https://reader033.fdocuments.us/reader033/viewer/2022061206/5476e0acb4af9f321d8b458a/html5/thumbnails/12.jpg)
SWOT Assessment: JSF
Strengths
Components/RenderKits
Managed Beans
Weaknesses
Server-centric
Library incompatibilities
Opportunities
Better support for front-end frameworks and responsive web design
Threats
Obsolescence
![Page 13: JSF 2.3: Integration with Front-End Frameworks](https://reader033.fdocuments.us/reader033/viewer/2022061206/5476e0acb4af9f321d8b458a/html5/thumbnails/13.jpg)
How can we make JSF 2.3 better?
![Page 14: JSF 2.3: Integration with Front-End Frameworks](https://reader033.fdocuments.us/reader033/viewer/2022061206/5476e0acb4af9f321d8b458a/html5/thumbnails/14.jpg)
Integrate, Engage, EmbraceIntegrate with front-end technologies and frameworks
Engage with wider developer community
Embrace change and modernization
![Page 15: JSF 2.3: Integration with Front-End Frameworks](https://reader033.fdocuments.us/reader033/viewer/2022061206/5476e0acb4af9f321d8b458a/html5/thumbnails/15.jpg)
Integration Ideas
Let’s start with AngularJS + Bootstrap + TypeScript
Write new standard/core RenderKits that target AngularJS directives/filters
Use BootStrap for responsive web design
![Page 16: JSF 2.3: Integration with Front-End Frameworks](https://reader033.fdocuments.us/reader033/viewer/2022061206/5476e0acb4af9f321d8b458a/html5/thumbnails/16.jpg)
Integration Ideas
Support JAX-RS annotations on managed beans
Implement SPA support for AngularJS (security features, URL resolution, resource loading)
Distribute JSF component libraries via Bower
![Page 17: JSF 2.3: Integration with Front-End Frameworks](https://reader033.fdocuments.us/reader033/viewer/2022061206/5476e0acb4af9f321d8b458a/html5/thumbnails/17.jpg)
Let’s discuss!