Митап .Net разработчиков TomskDotNet#1

29 ноября в Точке Кипения состоялся первый томский митап .NET программистов :)
Организацией, рекламой, фирменными печеньками, сладостями, кока-колой и прочими безобразиями занималась компания МЦЦ Томск (в том числе и я :)).

Что же всё таки было? А вот что:

Видео и презентации по ссылкам выше :)

Всем знаний — и присоединяйтесь к нам 31 января, на TomskDotNet #2!

Доклад про WebAssembly на Городе IT

10 сентября выступил на секции Enterprise конференции Город IT с докладом по WebAssembly.
С моей точки зрения, WebAssembly — это очень перспективное направление, хоть и не готовое к продакшену прямо сейчас. Но нам — разработчикам — просто необходимо внимательно следить за технологиями, которые уже в ближайшее время могут радикально изменить ситуацию в мире фронтэнда.
В докладе рассказывал про появление и развитие WebAssembly, языки и фреймворки, которые его используют, и показал возможности применения Майкрософтоской библиотеки Blazor для разработки SPA с использованием любых существующих .net библиотек (netstandard).
Спасибо всем участникам конференции за интерес и плодотворную дискуссию!

Презентация — уже сегодня на Slideshare, надеюсь на скорое появление видео (ждём организаторов!)
WebAssembly.pptx

OpenApiGenerator: fixing multiple file upload for JS clients

Remember, I love swagger! And since we have it anyway, it’s kinda dumb to write requests to that API manually.
Why would anyone want to come up with something like axios.get(‘/user/123/payments?fromDate=2018-01-01’) without intellisense, type-checking and compile-time verifications? What if someday you change that API’s route?

OpenApiGenerator is a great solution to this. You could easily get typed-clients for your API in almost any language, and make requests as easy as UserApi.get(123, dateFrom).
But that’s a well-known thing, let’s get to the point of this article :)
OpenApiGenerator plays well with almost anything, but file arrays. File arrays were introduced to OpenApi recently, so not all the tools support them yet.
So, let’s say you have a backend method that accepts an array of files (files will be passed with the same name):

[HttpPost()]
public IActionResult UploadFiles(IFormFile[] files)

OpenApiGenerator will provide you with a proper JS method, but it won’t work and will generate something like:

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryIk1aWkovTmf7LSJX

------WebKitFormBoundaryIk1aWkovTmf7LSJX
Content-Disposition: form-data; name="files"

[object File],[object File]
------WebKitFormBoundaryIk1aWkovTmf7LSJX--

Of course, that isn’t what we want. However, it’s quite easy to monkey-patch the generated ApiClient to achieve what we want. I know monkey-patching is dirty and you should probably fix this with inheritance&overriding, but I’ll leave this to you :) So, here’s the patch:

//this is to make ApiClient correctly handle array of files
const oldBuildCollectionParam = ApiClient.instance.buildCollectionParam;
ApiClient.instance.buildCollectionParam = function(param, collectionFormat) {
    if (param == null) {
        return null;
    }
    if (param.length > 0) {
        if (param[0] instanceof File) {
            return param;
        }
    }
    return oldBuildCollectionParam.call(this, param, collectionFormat);
};

How to make Swagger correctly handle file uploads (IFormFile) in Asp.Net Core

I love Swagger (OpenAPI). It’s a really nice way to share your API definitions, and it is so easy to integrate it into ASP.Net Core applications, that there’s literally no excuse not to use it.
The only glitch in Swagger’s integration is the lack of IFormFile support. So, if you’d like to upload a file you typically write the following action:

[HttpPost()]
public IActionResult UploadFile(IFormFile file)

And that’s how it’s gonna be displayed in Swagger-UI (the real problem is, of course, in wrong swagger.json definition). As you could see, there’s everything but an ability to upload a file (actually, Swagger exposed all properties of IFormFile, which is completely useless).
Swagger

There’s a nice discussion on Stackoverflow regarding this subject, and a couple of answers that solve the problem either via hardcoding or putting an attribute on an action. That didn’t sound like a generic solution for me, so I went down and implemented an Operation Filter that fixes the issue without any additional work.
The integration is quite simple (as with any other Swagger filter)

services.AddSwaggerGen(c => c.OperationFilter<FileUploadOperation>());

And here’s the actual filter. It handles IFormFile action parameters, IFormFile within other classes and even arrays(or any IEnumerables) of IFormFile.

    /// <summary>
    /// adds an ability to upload files via Swagger (and autogenerated js client)
    /// </summary>
    public class FileUploadOperation : IOperationFilter
    {
        public void Apply(Operation operation, OperationFilterContext context)
        {
            if (context.ApiDescription.HttpMethod != "POST")
                return;

            if (operation.Parameters == null)
                operation.Parameters = new List<IParameter>();

            var isFormFileFound = false;

            //try to find IEnumerable<IFormFile> parameters or IFormFile nested in other classes
            foreach (var parameter in operation.Parameters)
            {
                if (parameter is NonBodyParameter nonBodyParameter)
                {
                    var methodParameter =
                    context.ApiDescription.ParameterDescriptions.FirstOrDefault(x => x.Name == parameter.Name);
                    if (methodParameter != null)
                    {
                        if (typeof(IFormFile).IsAssignableFrom(methodParameter.Type))
                        {
                            nonBodyParameter.Type = "file";
                            nonBodyParameter.In = "formData";
                            isFormFileFound = true;
                        }
                        else if (typeof(IEnumerable<IFormFile>).IsAssignableFrom(methodParameter.Type))
                        {
                            nonBodyParameter.Items.Type = "file";
                            nonBodyParameter.In = "formData";
                            isFormFileFound = true;
                        }
                    }
                }
            }



            //try to find IFormFile parameters of method
            var formFileParameters = context.ApiDescription.ActionDescriptor.Parameters
                .Where(x => x.ParameterType == typeof(IFormFile)).ToList();
            foreach (var apiParameterDescription in formFileParameters)
            {
                operation.Parameters.Add(new NonBodyParameter
                {
                    Name = apiParameterDescription.Name,
                    In = "formData",
                    Description = "Upload File",
                    Required = true,
                    Type = "file"
                });
            }

            if (formFileParameters.Any())
            {
                foreach (var propertyInfo in typeof(IFormFile).GetProperties())
                {
                    var parametersWithTheSameName = operation.Parameters.Where(x => x.Name == propertyInfo.Name);
                    operation.Parameters.RemoveRange(parametersWithTheSameName);
                }
            }


            if (isFormFileFound)
                operation.Consumes.Add("multipart/form-data");
        }
    }

Using Mini-Profiler with Angular and HttpClient

Performance is essential for every web app, so profiling is a must. And there’s no better tool to monitor and profile your web app than Mini-Profiler from StackExchange. It’s simple, easily integratable and provides the most important profile metrics such as request duration and SQL queries.

Our typical Web SPA setup in Rubius is based on ASP.Net Core backend and Angular frontend. So we started integrating MiniProfiler into the stack, but it wasn’t that straightforward.

The thing is, MiniProfiler works perfectly with classic pages and jquery ajax calls, but fails to display any information on Angular http requests, which makes it barely usable in SPA.
To overcome it, there is a perfect post from Georg Dangl on how to make Mini-Profiler work with Angular if you’re using HttpModule, so go read Georg’s post and gist, it’s for you :)

However, in 4.3 Angular introduced HttpClientModule as a new way to talk to the backend API (replacing old HttpModule) and once we started to migrate to it we had the same issue again. There were no information about ajax requests.
So, I sat down and ported Georg’s gist to an HttpClient. So if you care about your performance and SQL queries, go grab it!

Семинар по ASP.Net Core в Точке Кипения

14 декабря вместе с коллегой Антоном Финько выступали в Точке Кипения с семинаром по ASP.Net Core.

y_eKgPHhHbs
Очень понравилась сама площадка — Точка Кипения — это отличное место, просторный зал, огромный экран и все пришедшие 60 человек там отлично разместились (и даже если было бы вдвое больше — всё равно всем было бы удобно :)). Фотографии не передадут всего комфрота и уюта (и кофе-брейка с плюшками), но покажут, насколько было хорошо:
4kZgU9Ke01U

nZQgjVYFvvE

F_UDmu7bIW8

Это было первое IT-мероприятие в Точке, и я считаю, оно прошло отлично! Небольшой 40-минутный доклад про теоретические основы и большой практический опыт, и более чем получасовая дискуссия после. Очень порадовал обмен мнениями и опытом использования от многих присутствовавших.

Ну а тем, кто не пришел — видео и презентация ниже :)

AspnetCore.pptx

До встречи на следующих семинарах!

Доклад по кроссплатформенной мобильной разработке на DevPro Красноярск

25 ноября выбрался в Красноярск, чтобы посетить местную конференцию D2D DevPro.
Организовывали её наши коллеги и партнеры из Аспирити, и получилось очень неплохо. 300+ человек, 3 параллельных секции — это первая IT конференция такого масштаба в Красноярске!

С удовольствием выступил и рассказал о подходах к кроссплатформенной разработке, про свой любимый Xamarin, про набирающий популярность React Native. Демо-показ возможностей React Native / Xamarin Forms / Xamarin на сходных примерах очень удачно продемонстрировал development experience при использовании кроссплатформенных фреймворков.

С видео наши красноярские друзья, к сожалению, подкачали, поэтому выкладываю видео с «репетиции» доклада, которая прошла в Томске за пару недель до DevPro :) А вот презентация — уже с самого Красноярска, доработанная и улучшенная.

Слайды:
Cross Platform.pptx