Embed Size (px)
DESCRIPTION
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.
Citation preview
Modernizing aLegacy Code Base via
Florian Benz / @flbenz
June 26, 2014
Initial SituationServerside rendering
A bit of jQuery
GWT for some features
Order HistoryList of orders
Order HistoryConfirm that goods arrived
Use Angular Selectively
<html ng-app="myMercateoApp" ...>
<div ng-controller="OrderListCtrl">
nginitServerside configuration
<tbody ng-controller="OrderRowCtrl" ng-init="orderId='90918130'">
nginclude Cache
<div ng-include="'.../ArticleList.jspf'"></div>
<script type="text/ng-template" id=".../ArticleList.jspf"> <div ng-controller="ArticleListCtrl"> ... </div></script>
nginclude CacheIncluding is required
<hash>.mercateoApp.js possible
But not for JSP / JSPF
Directives as WrappersjQuery UI Plugins
Caution: interfering DOM manipulations
Other IssuesAchieve unobtrusive JavaScript
IE7
i18n / l10n
WorkflowJust call Grunt from other build tools
Bower, Karma, Jasmine, ...
TypeScript= JavaScript
+ ES6
+ optional typing
Thank you!@flbenz
fbenz.net
