Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Modern Web-site Development Pipeline

•Download as PPTX, PDF•
•

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 of 25
1
2 Modern Web-site Development Pipeline Sergii Fradkov Andrii Zarharov Igor Magdich 5/24/2019
33 Modern Web Site Architecture If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization.
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
55 Typical Architecture
66 Before Development There's never time to do it right, but there's always time to do it over.
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 OAS sample
9 SonarQube project page
1010 Development Anything can be made to work if you fiddle with it long enough.
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
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
1313 Project Documentation If a program is useless, it will have to be documented.
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
1515 CI/CD and Code Review Program complexity grows until it exceeds the capabilities of the programmer who must maintain it.
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
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 Package script in PowerShell Core
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
2020 Automated Testing Undetectable errors are infinite in variety, in contrast to detectable errors, which by definition are limited.
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
2222 Tests Report - Allure
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 Thank You
25 Q & A

More Related Content

Modern Web-site Development Pipeline

  • 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
  • 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
  • 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
  • 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/