Modernizing a
Legacy Code Base via
Florian Benz / @flbenz
June 26, 2014
Initial Situation
Server­side rendering
A bit of jQuery
GWT for some features
Order History
List of orders
Order History
Confirm that goods arrived
Use Angular Selectively
<html ng-app="myMercateoApp" ...>
<div ng-controller="OrderListCtrl">
ng­init
Server­side configuration
<tbody ng-controller="OrderRowCtrl"
ng-init="orderId='90918130'">
ng­include Cache
<div ng-include="'.../ArticleList.jspf'"></div>
<script type="text/ng-template" id=".../ArticleList.jspf"...
ng­include Cache
Including is required
<hash>.mercateoApp.js possible
But not for JSP / JSPF
Directives as Wrappers
jQuery UI Plugins
Caution: interfering DOM manipulations
Other Issues
Achieve unobtrusive JavaScript
IE7
i18n / l10n
Workflow
Just call Grunt from other build tools
Bower, Karma, Jasmine, ...
TypeScript
= JavaScript
+ ES6
+ optional typing
Thank you!
@flbenz
fbenz.net
Modernizing a Legacy Code Base via Angular
Upcoming SlideShare
Loading in …5
×

Modernizing a Legacy Code Base via Angular

380 views

Published on

AngularJS has evolved into a solid framework that is well-suited for modernizing legacy web apps. Enhancing a legacy web app with AngularJS can be done step by step and thus with bypassing the risks of a rewrite. Especially for large-scale apps, iterative enhancement and replacement are generally preferred.

This talk describes the integration of AngularJS at Mercateo, where AngularJS is used to improve a front end mostly consisting of server-side rendered HTML, jQuery code and some GWT parts. I will highlight the rationale behind choosing AngularJS over other web frameworks and will walk through problems we encountered and our solutions, for example reasonable use cases of ng-init outside of ng-repeat.

Having used AngularJS within our application landscape for some time, we can conclude that it help us to react faster to business needs while providing a better user experience and cleaner code.

Published in: Internet, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
380
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Modernizing a Legacy Code Base via Angular

  1. 1. Modernizing a Legacy Code Base via Florian Benz / @flbenz June 26, 2014
  2. 2. Initial Situation Server­side rendering A bit of jQuery GWT for some features
  3. 3. Order History List of orders
  4. 4. Order History Confirm that goods arrived
  5. 5. Use Angular Selectively <html ng-app="myMercateoApp" ...> <div ng-controller="OrderListCtrl">
  6. 6. ng­init Server­side configuration <tbody ng-controller="OrderRowCtrl" ng-init="orderId='90918130'">
  7. 7. ng­include Cache <div ng-include="'.../ArticleList.jspf'"></div> <script type="text/ng-template" id=".../ArticleList.jspf"> <div ng-controller="ArticleListCtrl"> ... </div> </script>
  8. 8. ng­include Cache Including is required <hash>.mercateoApp.js possible But not for JSP / JSPF
  9. 9. Directives as Wrappers jQuery UI Plugins Caution: interfering DOM manipulations
  10. 10. Other Issues Achieve unobtrusive JavaScript IE7 i18n / l10n
  11. 11. Workflow Just call Grunt from other build tools Bower, Karma, Jasmine, ...
  12. 12. TypeScript = JavaScript + ES6 + optional typing
  13. 13. Thank you! @flbenz fbenz.net

×