2. Developing the next-gen enterprise web application Mark Gu M381

3. Developing the next-gen enterprise web application next-gen enterprise

4. Developing the next-gen enterprise web application web application enterprise next-gen Migrat e Rewrit e

6. Is a global leading provider of leasing and financing software system. Provides end-to-end capability eliminating the need for companies to maintain multiple systems. Has been on the market for more than 10 years, and has more than 100 employees across multiple development centers: NZ, India, and UK.

8. Complex business logic results in complex UI logic Multi-level cascading dropdowns Cyclic fields change notifications & defaulting rules Dynamic validations & approval rules In-memory states and temporary objects Fine grained licensing and role controls (nearly 1000 security roles) Inconsistent UI patterns

11. Spend most of the time working with C# Used to Windows application development Unfamiliar with HTML, JavaScript and CSS Unfamiliar with web application design paradigm New to responsive & mobile-first design concepts

12. Web hosting & server-side frameworks IIS, ASP.NET, ASP.NET MVC, SignalR UI technologies & programming languages HTML, CSS, JavaScript, cross-browser compatibility Concepts & design paradigm Async & RESTful operation, responsive & mobile-first design concepts Tons of client-side 3 rd party libraries & frameworks jQuery, Angular, Knockout, bootstrap, etc.

14. More than 1000 Windows forms & user controls About half million lines of code to convert 12 developers vs. 29 other developers still actively working on the Windows product 8 testers vs. 28 other testers still actively scripting against the Windows product

16. Almost 1 million lines of code in test scripts Single pass of all UI tests takes approx. 720 hours

18. How to leverage existing UI test scripts? How to efficiently and quickly convert code? How to take advantage of existing employees’ skillsets? How to address complex UI logic?

20. Windows based core product.NET Framework v4.5 Standard n-tier architecture Windows Forms, Windows Services,.NET Remoting Web based next-gen ASP.NET MVC & SignalR Twitter Bootstrap Durandal, jQuery, Knockout, etc. TypeScript

21. Form fields are the primary residents using System.ComponentModel.DataAnnotations; public class Address { [DataType(DataType.MultilineText)] public string Street { get; set; } public string Suburb { get; set; } public int City { get; set; } public int County { get; set; } public int State { get; set; } public string Zip { get; set; } public int Country { get; set; } }

22. Expressed declaratively using.NET attributes Can be used for various purposes Type: multi-line text, password, email, etc. State: visible, enabled, read-only, etc. Display: label, description, placeholder, etc. Validation: required, range, length, etc. You can invent your own [Visible(When="Country", Is=1 /*USA*/)] public int County { get; set; } [Caption("State", When="Country", In="1" /*USA*/)] [Caption("Province", When="Country", In="2,3" /*Canada,China*/)] public int State { get; set; } [Visible(true)] public int County { get; set; }

23. On page load, metadata is sent to client browser as a JavaScript object. [Enabled(When="Age", GreaterThan=15)] public string DriverLicense { get; set; } { "driverLicense": { "enabled": [ { "key": "age", "func": "greaterThan", "value": 15 } ] }

24. On page render, walk the object graphs of a view model and the metadata object Locate dependencies and subscribe to their value change notifications Enrich dependents with UI state observables this.driverLicense.enabled = ko.computed(function () { return greaterThan(this.age(), 15); }, this); { "name": "Mark" "age": 32 "driverLicense": "DL123456" } { "driverLicense": { "enabled": [ { "key": "age", "func": "greaterThan", "value": 15 } ] }

26. Suitable for very simple field-level UI logic. Once the generic plumbing is done,.NET developers don’t have to write any JavaScript code. Developers work with familiar technology – speeding up the migration.

27. Difficult to express complex conditions, e.g. Lots of magic strings Difficult to refactor and may result in run-time errors Same logic needs to be repeated for multiple properties Slows down page load & increases memory usage [Enabled(When="Year", GreaterThan=2000, And=true, WhenTheOther="Category", TheOtherStartsWith="CAT-")] public DateTime StartDate { get; set; }

28. Attributes now only specify the names of the members containing the actual UI logic. The actual logic can now be written in plain C# code Less magic strings, except method names Multiple properties can reference the same method, so no repetitions [Visible("IsRatingVisible")] public int Rating { get; set; } public bool IsRatingVisible() { return [condition 1] && ([condition 2] || [condition 3]); }

29. On compile, use Roslyn to parse method bodies and auto generate equivalent TypeScript code. No more runtime plumbing, improve performance and relieve memory pressure. Code generation to TypeScript ensures that refactoring won’t break client-side code at run-time. [Visible("IsAlternateFlowMethodVisible")] public int AlternateFlowMethod { get; set; } public bool IsAlternateFlowMethodVisible() { return InitialFlowMethod == FlowMethod.ChapsPayments || FlowMethod == FlowMethod.ChapsPayments; } [Visible("IsAlternateFlowMethodVisible")] public int AlternateFlowMethod { get; set; } public bool IsAlternateFlowMethodVisible() { return InitialFlowMethod == FlowMethod.ChapsPayments || FlowMethod == FlowMethod.ChapsPayments; } data.alternateFlowMethod.extend({ visible: () => { return data.initialFlowMethod() === Enums.FlowMethod.ChapsPayments || data.flowMethod() === Enums.FlowMethod.ChapsPayments; } }); data.alternateFlowMethod.extend({ visible: () => { return data.initialFlowMethod() === Enums.FlowMethod.ChapsPayments || data.flowMethod() === Enums.FlowMethod.ChapsPayments; } });

30. Developers continue to write C#, not JavaScript. Code generation is re-runnable and replaces the generated file on each compile. The process can be easily integrated into MSBuild for consistency.

31. Same mechanism can be used to generate a.NET proxy to interface with existing QA test scripts. [Visible("IsAlternateFlowMethodVisible")] public int AlternateFlowMethod { get; set; } public bool IsAlternateFlowMethodVisible() { return InitialFlowMethod == FlowMethod.ChapsPayments ||...; } [Visible("IsAlternateFlowMethodVisible")] public int AlternateFlowMethod { get; set; } public bool IsAlternateFlowMethodVisible() { return InitialFlowMethod == FlowMethod.ChapsPayments ||...; } public Property AlternateFlowMethod { get; protected set; } private void IntializeProperties() { AlternateFlowMethod = new Property ( getter: () => _data.AlternateFlowMethod, setter: value => _data.AlternateFlowMethod = value, visible: () => _data.IsAlternateFlowMethodVisible(),... );... } public Property AlternateFlowMethod { get; protected set; } private void IntializeProperties() { AlternateFlowMethod = new Property ( getter: () => _data.AlternateFlowMethod, setter: value => _data.AlternateFlowMethod = value, visible: () => _data.IsAlternateFlowMethodVisible(),... );... } bankInfoForm.InitialFlowMethod.Text = "CHAPS Payments"; Assert.True(bankInfoForm.AlternateFlowMethod.Visible, "..."); bankInfoForm.InitialFlowMethod.Text = "CHAPS Payments"; Assert.True(bankInfoForm.AlternateFlowMethod.Visible, "...");

32. Use Roslyn to analyse existing Windows UI code and auto-generate the necessary metadata attributes and their associated method bodies. Although the generated code may not be compilable, it helps uncovering hidden logics and speeding up the migration.

38. How to leverage existing UI test scripts? How to efficiently and quickly convert code? How to take advantage of existing employees’ skillsets? How to address complex UI logic?

46. Leveraging TypeScript in Cross-functional development teams Elliott Wed 10:40am ASP.NET MVC vNext with Visual Studio 2015’s new tools Ballroom2 Fri 9:00am Torment Your Colleagues with the ‘Roslyn’.NET Compiler Platform NZ2 Fri 1:55pm Find me later at…  Closing drinks Fri 3:00-4:30pm 1 2 3

47. Subscribe to our fortnightly newsletter http://aka.ms/technetnz http://aka.ms/msdnnz http://aka.ms/ch9nz Free Online Learning http://aka.ms/mva Sessions on Demand