Embed Size (px)
Citation preview
Technology Stack DiscussionSpeaker: Zaiyang Li
Front endTechnology Stack
Frameworks used in the current iteration
…with a few more
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
Karma, Mocha, and Chai
Karma is a test runner Mocha is a test framework and includes a test runner Chai is an assertion framework
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
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
Front-end Build Pipeline
src/**/*.jsBundle.js
Node_modules/angularNode_module/jquery…
Bundle.vendor.js
*.css*.scss
Style.css
File-loader style-
loaderSass-loaderBabel-loader
File assets:FontsPngHtml
FontsPnghtml
--watch flag to regenerate artifacts when source files change, with browser live-reloading
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?
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?
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?
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?
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?
Back endTechnology Stack
Backend Technologies
BespokeEvent
Sourcing Framewo
rk
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
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.
Windsor Castle Project
Large number services: logging, IoC, dynamic proxy,… Decouples interfaces from implementation.
Autofac
Compatible with .NET Core
Xunit 2
Parametrised tests Can be used in combination with Moq and Autofixture Unit testing made easy.
Aspose.Cells
Read and write Excel format with C#. Simple API Not compatible with .NET Core yet.
AutoFixture
Automatically generate random data, and populates an object instance.
Time saver for writing test cases.
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.
BespokeEvent
Sourcing Framework
Questions?
