Transcript
Page 1: Modernizing a Legacy Code Base via Angular

Modernizing aLegacy Code Base via

Florian Benz / @flbenz

June 26, 2014

Page 2: Modernizing a Legacy Code Base via Angular
Page 3: Modernizing a Legacy Code Base via Angular

Initial SituationServer­side rendering

A bit of jQuery

GWT for some features

Page 4: Modernizing a Legacy Code Base via Angular

Order HistoryList of orders

Page 5: Modernizing a Legacy Code Base via Angular

Order HistoryConfirm that goods arrived

Page 6: Modernizing a Legacy Code Base via Angular

Use Angular Selectively

<html ng-app="myMercateoApp" ...>

<div ng-controller="OrderListCtrl">

Page 7: Modernizing a Legacy Code Base via Angular

ng­initServer­side configuration

<tbody ng-controller="OrderRowCtrl" ng-init="orderId='90918130'">

Page 8: Modernizing a Legacy Code Base via Angular

ng­include Cache

<div ng-include="'.../ArticleList.jspf'"></div>

<script type="text/ng-template" id=".../ArticleList.jspf"> <div ng-controller="ArticleListCtrl"> ... </div></script>

Page 9: Modernizing a Legacy Code Base via Angular

ng­include CacheIncluding is required

<hash>.mercateoApp.js possible

But not for JSP / JSPF

Page 10: Modernizing a Legacy Code Base via Angular

Directives as WrappersjQuery UI Plugins

Caution: interfering DOM manipulations

Page 11: Modernizing a Legacy Code Base via Angular

Other IssuesAchieve unobtrusive JavaScript

IE7

i18n / l10n

Page 12: Modernizing a Legacy Code Base via Angular

WorkflowJust call Grunt from other build tools

Bower, Karma, Jasmine, ...

Page 13: Modernizing a Legacy Code Base via Angular

TypeScript= JavaScript

+ ES6

+ optional typing

Page 14: Modernizing a Legacy Code Base via Angular

Thank you!@flbenz

fbenz.net


Recommended