modernizing a legacy code base via angular

Post on 08-Jul-2015

154 Views

Category:

Internet

0 Downloads

Preview:

Click to see full reader

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.

TRANSCRIPT

Modernizing aLegacy Code Base via

Florian Benz / @flbenz

June 26, 2014

Initial SituationServer­side 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">

ng­initServer­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"> <div ng-controller="ArticleListCtrl"> ... </div></script>

ng­include 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

top related