technology stack discussion
TRANSCRIPT
![Page 1: Technology Stack Discussion](https://reader036.vdocuments.mx/reader036/viewer/2022081521/58ef48271a28ab78068b4587/html5/thumbnails/1.jpg)
Technology Stack DiscussionSpeaker: Zaiyang Li
![Page 3: Technology Stack Discussion](https://reader036.vdocuments.mx/reader036/viewer/2022081521/58ef48271a28ab78068b4587/html5/thumbnails/3.jpg)
Front endTechnology Stack
![Page 4: Technology Stack Discussion](https://reader036.vdocuments.mx/reader036/viewer/2022081521/58ef48271a28ab78068b4587/html5/thumbnails/4.jpg)
Frameworks used in the current iteration
…with a few more
![Page 5: Technology Stack Discussion](https://reader036.vdocuments.mx/reader036/viewer/2022081521/58ef48271a28ab78068b4587/html5/thumbnails/5.jpg)
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
![Page 6: Technology Stack Discussion](https://reader036.vdocuments.mx/reader036/viewer/2022081521/58ef48271a28ab78068b4587/html5/thumbnails/6.jpg)
Karma, Mocha, and Chai
Karma is a test runner Mocha is a test framework and includes a test runner Chai is an assertion framework
![Page 7: Technology Stack Discussion](https://reader036.vdocuments.mx/reader036/viewer/2022081521/58ef48271a28ab78068b4587/html5/thumbnails/7.jpg)
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
![Page 8: Technology Stack Discussion](https://reader036.vdocuments.mx/reader036/viewer/2022081521/58ef48271a28ab78068b4587/html5/thumbnails/8.jpg)
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
![Page 9: Technology Stack Discussion](https://reader036.vdocuments.mx/reader036/viewer/2022081521/58ef48271a28ab78068b4587/html5/thumbnails/9.jpg)
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
![Page 10: Technology Stack Discussion](https://reader036.vdocuments.mx/reader036/viewer/2022081521/58ef48271a28ab78068b4587/html5/thumbnails/10.jpg)
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?
![Page 11: Technology Stack Discussion](https://reader036.vdocuments.mx/reader036/viewer/2022081521/58ef48271a28ab78068b4587/html5/thumbnails/11.jpg)
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?
![Page 12: Technology Stack Discussion](https://reader036.vdocuments.mx/reader036/viewer/2022081521/58ef48271a28ab78068b4587/html5/thumbnails/12.jpg)
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?
![Page 13: Technology Stack Discussion](https://reader036.vdocuments.mx/reader036/viewer/2022081521/58ef48271a28ab78068b4587/html5/thumbnails/13.jpg)
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?
![Page 14: Technology Stack Discussion](https://reader036.vdocuments.mx/reader036/viewer/2022081521/58ef48271a28ab78068b4587/html5/thumbnails/14.jpg)
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?
![Page 15: Technology Stack Discussion](https://reader036.vdocuments.mx/reader036/viewer/2022081521/58ef48271a28ab78068b4587/html5/thumbnails/15.jpg)
Back endTechnology Stack
![Page 16: Technology Stack Discussion](https://reader036.vdocuments.mx/reader036/viewer/2022081521/58ef48271a28ab78068b4587/html5/thumbnails/16.jpg)
Backend Technologies
BespokeEvent
Sourcing Framewo
rk
![Page 17: Technology Stack Discussion](https://reader036.vdocuments.mx/reader036/viewer/2022081521/58ef48271a28ab78068b4587/html5/thumbnails/17.jpg)
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
![Page 18: Technology Stack Discussion](https://reader036.vdocuments.mx/reader036/viewer/2022081521/58ef48271a28ab78068b4587/html5/thumbnails/18.jpg)
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.
![Page 19: Technology Stack Discussion](https://reader036.vdocuments.mx/reader036/viewer/2022081521/58ef48271a28ab78068b4587/html5/thumbnails/19.jpg)
Windsor Castle Project
Large number services: logging, IoC, dynamic proxy,… Decouples interfaces from implementation.
![Page 20: Technology Stack Discussion](https://reader036.vdocuments.mx/reader036/viewer/2022081521/58ef48271a28ab78068b4587/html5/thumbnails/20.jpg)
Autofac
Compatible with .NET Core
![Page 21: Technology Stack Discussion](https://reader036.vdocuments.mx/reader036/viewer/2022081521/58ef48271a28ab78068b4587/html5/thumbnails/21.jpg)
Xunit 2
Parametrised tests Can be used in combination with Moq and Autofixture Unit testing made easy.
![Page 22: Technology Stack Discussion](https://reader036.vdocuments.mx/reader036/viewer/2022081521/58ef48271a28ab78068b4587/html5/thumbnails/22.jpg)
Aspose.Cells
Read and write Excel format with C#. Simple API Not compatible with .NET Core yet.
![Page 23: Technology Stack Discussion](https://reader036.vdocuments.mx/reader036/viewer/2022081521/58ef48271a28ab78068b4587/html5/thumbnails/23.jpg)
AutoFixture
Automatically generate random data, and populates an object instance.
Time saver for writing test cases.
![Page 24: Technology Stack Discussion](https://reader036.vdocuments.mx/reader036/viewer/2022081521/58ef48271a28ab78068b4587/html5/thumbnails/24.jpg)
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
![Page 25: Technology Stack Discussion](https://reader036.vdocuments.mx/reader036/viewer/2022081521/58ef48271a28ab78068b4587/html5/thumbnails/25.jpg)
Questions?