Tech Stack - Angular
1 like888 views
The document discusses the migration from the Flex application framework to HTML5 and AngularJS, detailing the limitations of Flex and the benefits of HTML5 and AngularJS, such as improved compatibility and modern functionality. It outlines essential tools and frameworks for the migration process, including Bootstrap, Bower, npm, and Gulp, as well as discusses content delivery through Akamai CDN and security protocols like JWT and OAuth 2.0. Additionally, it highlights challenges related to backend interaction, security, performance, and browser compatibility during the migration.
![HTML5
HTML5[a] is a markup language used for structuring and presenting
content on the World Wide Web. It is the fifth and current version of
the HTML standard.
It was published in October 2014 by the World Wide Web
Consortium (W3C)[2][4]](https://image.slidesharecdn.com/techstackangular-170306033918/85/Tech-Stack-Angular-3-320.jpg)
Tech Stack - Angular
- 1. Flex to HTML5 Migration COMPLETE TECH STACK AUTHOR : SRINEEL MAZUMDAR
- 2. Overview of Flex Application Flex is a highly productive, open source application framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and devices. It provides a modern, standards- based language and programming model that supports common design patterns suitable for developers from many backgrounds. However there is no good alternative flash player like there are alternative web browsers. Flash is proprietary and not a web standard. Compatibility issues with Apple manufactured devices
- 3. HTML5 HTML5[a] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current version of the HTML standard. It was published in October 2014 by the World Wide Web Consortium (W3C)[2][4]
- 4. JS Framework AngularJS (commonly referred to as "Angular" or "Angular.js") is a complete JavaScript-based open-source front-end web application framework It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view– controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.
- 5. Benefits of Angular JS Follows MVC / MVVM architecture which is almost similar to Flex MVC. Can be used with HTML5. Runs on almost all latest browser without any plugin support. Robust support for REST and HTTP. Open Source, mainly maintained by Google.
- 6. Benefits of HTML5 Open source, no vendor lock in. Supports most of the modern browsers. Includes options to directly add video, audio, canvas elements, and the integration of scalable vector graphics content. Possible to create an interactive HTML, CSS, and JavaScript web app that displays properly across different devices. This will greatly reduce the cost of developing and maintaining separate desktop and mobile versions of an application.
- 7. Migration from Flex to HTML5/Angular
- 8. Additional tools, libraries, frameworks When coding for actual migration, there are other tools, libraries and frameworks that are required to make complete application. The following slides gives a brief overview of each of them.
- 9. Bootstrap Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Unlike many web frameworks, it concerns itself with front-end development only.
- 10. Bower Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you. Keeping track of all these packages and making sure they are up to date (or set to the specific versions you need) is tricky. Bower to the rescue! Bower can manage components that contain HTML, CSS, JavaScript, fonts or even image files. Bower doesn’t concatenate or minify code or do anything else - it just installs the right versions of the packages you need and their dependencies.
- 11. NPM : Node Package Manager NPM is the package manager for JavaScript. Helps find, share, and reuse packages of code from hundreds of thousands of developers — and assemble them in powerful new ways. Required for Bower.
- 12. Gulp Gulp is a javascript task runner. Gulp however prefers code over configuration. Being that your tasks are written in code, gulp feels more like a build framework, giving you the tools to create tasks that fit your specific needs. Gulp is a streaming build system, by using node’s streams file manipulation is all done in memory
- 13. Akamai CDN A content distribution network—also known as a content delivery network—is a large, geographically distributed network of specialized servers that accelerate the delivery of web content and rich media to internet-connected devices. The world's largest content distribution network, owned and operated by Akamai, spans more than 216,000 servers in over 120 countries and within more than 1,500 networks around the world. The primary technique that a content distribution network (CDN) uses to speed the delivery of web content to end users is edge caching, which entails storing replicas of static text, image, audio, and video content in multiple servers around the "edges" of the internet, so that user requests can be served by a nearby edge server rather than by a far-off origin server. To also accelerate the delivery of dynamically generated web content that's difficult or impossible to cache, an advanced content distribution network such as Akamai's uses a range of techniques such as: route optimization, TCP connection optimization, and pre-fetching.
- 14. Token Based Authorization and SSO JSON Web Tokens JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. OAuth 2.0 OAuth 2.0 is the industry-standard protocol for authorization. OAuth 2.0 supersedes the work done on the original OAuth protocol created in 2006. OAuth 2.0 focuses on client developer simplicity while providing specific authorization flows for web applications, desktop applications, mobile phones, and living room devices. This specification is being developed within the IETF OAuth WG.
- 15. Challenges How will the new HTML5 + Angular frontend interact with backend ? Is it possible to make REST calls to backend without making any changes to the backend code ?If backend needs to be rewritten then Spring MVC as Rest Provider will be the best choice Security : Data will be exchanged in JSON format . Need to implement proper security measures and secure coding practices. Performance : Care should be taken not to cache/store too much data in browser. Performance improvement will be a priority. Testing across multiple browsers for compatibility.