Topics of this presentation: - Basics and best practices of developing single-page applications (SPA) and Web API Services on Microsoft .NET - - Core with Docker and Linux. - PowerShell Core automated builds. - Markdown/PDF documentation. - Documentation of public interfaces with Swagger/OAS/YAML. - Automated testing of SPA on Protractor and testing the Web API on Postman/Newman. This presentation by Sergii Fradkov (Consultant, Engineering), Andrii Zarharov (Lead Software Engineer, Consultant), Igor Magdich (Lead Test Engineer, Consultant) was delivered at GlobalLogic Kharkiv .NET TechTalk #1 on May 24, 2019.

1. 1

2. 2
Modern Web-site Development Pipeline
Sergii Fradkov
Andrii Zarharov
Igor Magdich
5/24/2019

3. 33
Modern Web Site Architecture
If builders built buildings the way programmers wrote programs, then
the first woodpecker that came along would destroy civilization.

4. 44
Ingredients
• Frontend / Angular 7
we love Microsoft, so we love TypeScript
• Backend / .NET Core 2
we all love it, and it is cross-platform
• Hosting Platform / Docker and Linux
our operations team love it, our clients pay less, so they love it even more
• Code Review / SonarQube, ReSharper and StyleCop
nobody loves them as they are “bad cops”
• API Tests / Postman and Newman
everybody loves them, even QA engineers, we all love "brothers"
• UI Tests / Protractor
QA love Angular and tractors, especially if tractors are Pro
• Coding / Visual Studio 2017 / Visual Studio Code
we do all TypeScript development in VS Code

5. 55
Typical Architecture

6. 66
Before Development
There's never time to do it right, but there's always time to do it over.

7. 77
Before you start coding
• Create an OAS (Open API Specification) aka Swagger
do not generate it automatically
• Agree on OAS with all other parties
models, nullability, required fields, GET / POST / PUT / PATCH / DELETE
• Have we said already about an agreement on OAS?
better do it now if possible and if you are not a fan of Leopold Ritter Sacher-Masoch
• Do not invent your own coding guidelines
try using industry standards
• Setup the same coding guidelines across all tools and team members
spaces / tabs / position of curly braces – we use .sln.DotSettings files
• Setup SonarQube server
you'll get single place for all code quality and analytics for all your projects

8. 8
OAS sample

9. 9
SonarQube project page

10. 1010
Development
Anything can be made to work if you fiddle with it long enough.

11. 1111
Leverage .NET Core
• Controllers and Repositories
- Every repository has two versions: Local and Remote, Local repositories do not depend on any
external resources, Remote repositories require appropriate settings and call other HTTP
services or databases
- Startup.cs controls which one to inject based on an
environment (ASPNETCORE_ENVIRONMENT)
- Any microservice can be launched "locally" and tested with API tests
• Middleware
- Use your custom .NET Core middleware pushed as NuGet packages for unified approach for
error handling, logging, monitoring and returning service info
• .NET Core backend for Angular
- Do not develop separate Angular app and separate C# backend, develop it as a combined
project from Visual Studio perspective
- Angular app always requests its own C# backend, no CORS problem

12. 1212
Leverage .NET Core. Continued
• Configuration Settings
- Put all your configuration to environment variables as only this way you may configure code in
Docker containers
- Make use of different "profiles" in your launchSettings.json with different settings for
Development Local and Development Remote modes

13. 1313
Project Documentation
If a program is useless, it will have to be documented.

14. 1414
Use MD (markdown) for all your documents
• All of these documents
- Design documents
- Code review checklists
- Design review checklists
- QA protocols
can be stored and supported as text markdown files and transformed to
final colorful styled PDF documents during CI/CD process (using Node
package MdPdf)
• Markdown documents may be filled with all kinds of boring data
automatically, that dramatically decreases manual work

15. 1515
CI/CD and Code Review
Program complexity grows until it exceeds the capabilities of the
programmer who must maintain it.

16. 1616
Branch / Commit workflow
• Setup your own Git flow
Git flow, GitLab flow, GitHub flow, custom flow
• Name your branches using a pattern
for example "issue/PRO-125" where "PRO" is a codename of JIRA project and 125 is a JIRA issue
• Refer to your JIRA issue in commits
git commit –m "PRO-125: Add wonderful green button"
• Setup SonarQube analysis for every commit
build fails if the code does not pass SonarQube code review
• Always merge from master to a branch before submit a merge request
your branch should always be ahead of master
• Process merge requests quickly enough
do not review MR for days or weeks

17. 1717
Use your CI/CD for maximum of tasks
• Use PowerShell Core for any scripting
Cross-platform tool that is almost natural for .NET developers
• Convert all documentation from markdown to PDF
• Compress different files to ready-to-go archives and calculate
SHA256 hashes
Localization resources, sources, binaries, stored procedures
• Run unit tests
• Create Docker images with built binaries
• Run Docker containers and pass API tests using Newman
• Get from the build machine one single versioned archive with all
needed parts for the final project packaging
(other archives, supplemental files)

18. 18
Package script in PowerShell Core

19. 1919
Use your CI/CD for maximum of tasks. Continued
• Publish your Docker images to Docker registry
If you are lazy as all programmers are – involve your lovely OPS team, they also should work sometimes
• Deploy Docker containers to your hosting and run it
• Check the health state of the container
• Enjoy working code on the Development environment
• Ping QA team to start Protractor and Newman integration tests

20. 2020
Automated Testing
Undetectable errors are infinite in variety, in contrast to detectable
errors, which by definition are limited.

21. 2121
Test automation
• Technologies and tools are the same as for developers
(VS Code, Typescript, PowerShell, AWS, Docker)
• Tests are created in parallel with code
• Tests repository is separated from project repository
There are no project dependencies from tests
• Tests environment is separated and controlled by QA team
• Tests are limited to API and E2E
Protractor + TypeScript, Page Objects + Façade, API tests are incorporated in E2E
• Documentation package generation is automated
• Daily Test reports are available for all team members

22. 2222
Tests Report - Allure

23. 23
Links
• Angular - https://angular.io/
• .NET Core - https://dotnet.microsoft.com/download
• Visual Studio Code - https://code.visualstudio.com/
• OpenAPI Specification - https://swagger.io/specification/
• Postman - https://www.getpostman.com/
• PowerShell Core - https://github.com/PowerShell/PowerShell
• Node JS - https://nodejs.org/en/
• Protractor - https://www.protractortest.org/
• Docker - https://www.docker.com/

24. 24
Thank You

25. 25
Q & A