More Related Content
Technology Stack Discussion
- 1. Technology Stack Discussion Speaker: Zaiyang Li
- 2. First let’s look at a demo http://localhost:8000
- 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?
- 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?