Всем привет!

Стартую свой блог и канал про IT-разработку, технологии, команды и процессы. Буду делиться своим опытом и знаниями, которые накопились за годы работы в продуктовых IT-компаниях.

Постараюсь сделать что-то интересное и нескучное. Поехали)

Вопреки регулярному хайпу вокруг очередного модного языка программирования, фреймворка или подхода, выбор стека технологий оказался в моем топе наиболее важных аспектов эффективного процесса разработки только на четвертом месте.

Сам топ выглядит так:

1. Кадры и найм
2. Управление и процессы
3. Архитектура
4. Стек технологий

Подробнее можно почитать в моем блоге - https://blog.krasman.dev/chto-yavlyaetsya-glavnym-sekretom-uspeha-effektivnoj-razrabotki-it-produkta

#development #hiring #processes #team #architecture

Несколько часов назад авторы Dart и Flutter со сцены показали превью новых фичей, которые будут добавлены в SDK в ближайшем будущем. Из самого интересного:

Flutter Web 🌐
Поддержка WebAssembly - https://www.youtube.com/watch?v=zKQYGKAe5W8&t=5682s
Интеграция Flutter в обычные веб-приложения (аналог iframe) - https://www.youtube.com/watch?v=zKQYGKAe5W8&t=5796s
Поддержка Pixel Shader в браузере - https://www.youtube.com/watch?v=zKQYGKAe5W8&t=6029s

Flutter Mobile📱
3D анимация - https://youtu.be/zKQYGKAe5W8?t=7109

Dart 🎯
Поддержка RISC-V архитектуры для примитивных embedded-девайсов - https://youtu.be/zKQYGKAe5W8?list=PLjxrf2q8roU3LvrdR8Hv_phLrTj0xmjnD&t=5382

Выглядит очень круто 🔥🔥🔥

#flutter #development

TypeScript 5.0 Beta

Позавчера зарелизили. Краткий обзор:

- Скорость сборки проектов на TS должна вырасти на 10-20% по сравнению с версией 4.9 🚀

- Главная новость - поддержка официального стандарта декораторов (version 2022-03) ECMAScript из коробки, без флага `experimentalDecorators`. Для меня, как активного пользователя декораторов в TS, это шикарная новость. Но давайте разберемся, что это значит? 🎓

1) Декораторы в TypeScript теперь могут работать в одном из двух режимов: experimentalDecorators: true или experimentalDecorators: false.

2) experimentalDecorators: true - экспериментальный стандарт из ранних версий пропозала ECMAScript, который так и не утвердили. Текущие версии опенсорс-библиотек с декораторами типа angular и mobx написаны на нем и они будут работать в данном режиме.

3) experimentalDecorators: false - текущая измененная версия (2022-03) пропозала декораторов ECMAScript, которая сейчас в stage 3 и с большой вероятностью скоро станет официально частью языка. Текущие версии angular и mobx в этом режиме работать не будут. Им нужно переписать свои декораторы под новый стандарт и выпустить новые мажорные версии с breaking changes. Сделать это стоит, потому что рано или поздно новый стандарт реализуют нативно в браузерах и node.js, что позволит совсем убрать полифилы из транспиляторов.

4) Типизация декораторов и соответствие текущему режиму компиляции проверяется в compile-time. Есть возможность писать strong-typed декораторы, ограничивая скоуп их использования для конечных пользователей.

Пример моей реализации декоратора "observable" для solid-js (версия с experimentalDecorators: false):

import { createSignal } from 'solid-js'

function initObservableField(target: any, name: PropertyKey): void {
  const [value, setValue] = createSignal()

  Object.defineProperty(target, name, {
    configurable: true,
    enumerable: true,
    get: () => value(),
    set: (newValue) => setValue(newValue),
  })
}

export function observable(_: any, context: ClassFieldDecoratorContext) {
  context.addInitializer(function (this: any) {
    initObservableField(this, context.name)
  })
}

Применение

import { createEffect } from 'solid-js'
import { observable } from './mobx-solid-js/decorators/observable'

class ViewModel {
  @observable
  counter = 15

  @observable
  loaded = false

  @observable
  values = [1, 2, 3]

  get total() {
    return this.counter + this.values.length
  }
}

let timerIndex = 0
const vm = new ViewModel()
const vm2 = new ViewModel()

createEffect(() => {
  console.log('reaction effect', vm.counter, vm.loaded, vm.values.length, vm2.values.length)
})

setInterval(() => {
  timerIndex++
  console.log('timerIndex:', timerIndex)
  if (timerIndex % 2) {
    vm.counter += 1
  } else {
    vm2.values = [...vm2.values, 5]
  }
}, 1000)

Output

reaction effect: 15 false 3 3
timerIndex: 1
reaction effect: 16 false 3 3
timerIndex: 2
reaction effect: 16 false 3 4
timerIndex: 3
reaction effect: 17 false 3 4
timerIndex: 4
reaction effect: 17 false 3 5
timerIndex: 5
reaction effect: 18 false 3 5
timerIndex: 6
reaction effect: 18 false 3 6

Подробнее о декораторах можно почитать тут.

- Так же по традиции добавлены новые возможности более строго и точно выводить типы автоматически. Самая интересная - `const Type Parameters` 🎯

Было:

type HasNames = { readonly names: string[] };
function getNamesExactly<T extends HasNames>(arg: T): T["names"] {
    return arg.names;
}

// Inferred type: string[]
const names = getNamesExactly({ names: ["Alice", "Bob", "Eve"]});

Стало

type HasNames = { names: readonly string[] };
function getNamesExactly<const T extends HasNames>(arg: T): T["names"] {
    return arg.names;
}

// Inferred type: readonly ["Alice", "Bob", "Eve"]
// Note: Didn't need to write 'as const' here
const names = getNamesExactly({ names: ["Alice", "Bob", "Eve"] });

Попробовать бэта-версию на своем проекте можно уже сейчас:

npm install typescript@beta

#typescript #frontend #development

Новая статья в блоге про найм в IT-командах. Уже скоро доберемся до деталей технического интервью разработчиков, а пока про процессы и мой опыт в целом - https://blog.krasman.dev/najm-v-it-postroenie-processa

#hiring #processes #team #development

Мощь TypeScript в одной картинке. Все проверяется в compile time.

Планирую в ближайшем будущем создать в блоге рубрику "TypeScript паттерны" в виде серии практических статей с примерами кода. Это для разогрева)

#typescript #development

Dart на бэкенде

В последнее время все чаще прослеживается тренд на использование Dart как fullstack-языка c переиспользованием общего кода на фронтенде и бэкенде. Думаю, у этого направления есть перспективы.

Примеры:

Раз - https://www.youtube.com/watch?v=QN6juNWW3js&t=604s&ab_channel=Serverpod%F0%9F%9A%80

Два - https://www.youtube.com/watch?v=TGKipiJhpXo&ab_channel=FlutterCommunity

#dart #flutter #development #frontend #backend

TypeScript Patterns. Номинальные типы

Неделю назад анонсировал цикл статей по лучшим практикам в TypeScript. Первую часть уже можно почитать в моем блоге -
https://blog.krasman.dev/typescript-patterns-nominalnye-tipy

Продолжение следует...

#typescript #frontend #development

Как вам такое?

Голосуем лайками, если интересно узнать как это работает)

#typescript #showcase #short #development