Zaiyang Li discusses the technology stack for a project, including the front-end framework Angular and build tools like Webpack, and the back-end framework ASP.NET Core with libraries like Dapper and testing tools like Xunit and Moq. Chart.js is used for data visualization, and a bespoke event sourcing framework is in active development to run in the same process as the web server. Protocol buffers are used for serialization and provide benefits like high performance and backward compatibility.

1. Technology Stack Discussion
Speaker: Zaiyang Li

2. First let’s look at a
demo
http://localhost:8000

3. Front end
Technology Stack

4. Frameworks used in the current iteration
…with a few more

5. Why Angular?
 http://stateofjs.com/2016/frontend/ - A still very popular choice
for frontend SPA development – just after React.js
 Component-based, highly reusable and composable
 Lots of libraries, good ecosystem
 Modular code organization
 MVC

6. Karma, Mocha, and Chai
 Karma is a test runner
 Mocha is a test framework and includes a test runner
 Chai is an assertion framework

7. ECMAScript 6 and Babel
 Next generation JavaScript, new syntaxes.
 Fully supported in latest Firefox, Chrome, Safari,
NodeJS releases.
 None/partial support on older browsers
 Require a transpilation step for code to work on older
browser
 Class, Spread operator, destructuring, import,
lambda, many more.
http://kangax.github.io/compat-table/es6/
https://www.w3counter.com/globalstats.php

8. Webpack
 Similar to Gulp, automated build pipelines.
 Build tool for combining and transforming scripts and
stylesheets
 Declarative style, works by loading a source file and apply a
series of transformations.
 “Loaders” can be plugged into Webpack to work with different
scripting languages

9. Front-end Build Pipeline
src/**/*.jsBundle.js
Node_modules/angular
Node_module/jquery
…
Bundle.vendor.js
*.css
*.scss
Style.css
File-loader
style-loader
Sass-loader
Babel-loader
File assets:
Fonts
Png
Html
Fonts
Png
html
--watch flag to regenerate artifacts when
source files change, with browser live-
reloading

10. Questions
 Angular-material provides at set of ready to use UI
components which can be dropped into the html
mark-up of an angular component. Provides nice
animation, UI events, theming and layout out of the
box, saves lots of time creating own UI components.
 Angular-messages is a module provided by angular.
Conveniently displays validation errors for forms. Lots
forms in the UI, very convenient.
 Angular-jwt is an extension to $http, automatically adds
authorization token to http headers (e.g.
“Authorization: Bearer efa78edf32878392…..”) when
calling guarded REST APIs. Time saver.
How are
angular-material, angular-
messages, angular-jwt
used?

11. Questions
 Both Knockout and Angular are suitable for building
single page applications both large and small. Main
reason is the popularity of angular. (see survey at
stateofjs.com/frontend) There are lots of tutorials and
libraries based on the framework.
 The platform team is using it. Can exchange knowledge
and best practices.
 Once the transition to cloud is underway, every team
will be using some kind of frontend framework. It’s a
great way to test if angular works and use the lessons
learnt to help build better products in the future.
The UI seems to be very simple,
why not use KnockoutJS
instead?

12. Questions  Chart.js is a library for data visualization. It can draw
graphs on an HTML5 canvas, supports animation, and
interaction.
 In the translation cost estimation page, a bar chart/pie
chart can help visualize the cost of translating a
product to a few other languages.
 In the translation availability page, it can show a bar
graph of number of translated documents for each
language.
How is Chart.js used?

13. Questions  Karma executes tests in the browser. Code that
interacts with DOM have to be tested in the browser
(UI integration testing).
 Mocha is run on the command line and tests code that
does not interact with DOM (Unit testing logic).
 Chai is an assertion library that provides a fluent API,
e.g. expect(1+1).to.equal(2), instead of assert.equal(1+1,
2, “1+1 should be 2”)
 Holy trinity: Karma+Mocha+Chai.
Why both Karma and Mocha?
Aren’t they both JavaScript test
runners?

14. Questions
 Protocol-Buffers is a high performance RPC format. It is
mostly used for communication in distributed systems.
The data is serialized as bytes and sent across a socket,
HTTP request, or can be persisted in files and
databases.
 Google use it for communication between the servers
in their data centres, because it is faster than JSON and
XML.
 Event data is serialized using the Protocol-buffer
format and stored in SQL Server in a varbinary column.
 Bypasses requirement for needing to define a schema
upfront, this is how we cope with arbitrary content
types.
 Newer protocol model is able to maintain backward
compatibility with older serialized bytes.
How is Protocol-Buffer used?
What are the benefits?

15. Back end
Technology Stack

16. Backend Technologies
Bespoke
Event
Sourcing
Framework

17. Dapper-dot-net
 A simple object mapper.
 Write query
 Execute with Dapper
 Get strongly-typed objects back
 Made by StackExchange, very
 high performance. See benchmark
https://github.com/StackExchange/dapper-dot-net
 Compatible with .NET Core

18. ASP.NET Core
 Next generation ASP.NET framework, open source.
 Cross-platform web server.
 High performance http server called Kestrel.
 Cloud
 Compatible with .NET native.

19. Windsor Castle Project
 Large number services: logging, IoC, dynamic proxy,…
 Decouples interfaces from implementation.

20. Autofac
 Compatible with .NET Core

21. Xunit 2
 Parametrised tests
 Can be used in combination with Moq and Autofixture
 Unit testing made easy.

22. Aspose.Cells
 Read and write Excel format with C#.
 Simple API
 Not compatible with .NET Core yet.

23. AutoFixture
 Automatically generate random data, and populates an object
instance.
 Time saver for writing test cases.

24. Bespoke Event Sourcing Framework
 Runs in the same process as the web server.
 Don’t have a name for it yet.
 Active development.
 Light-weight
 Beta version in 3 months.
Bespoke
Event
Sourcing
Framework

25. Questions?