Skip to content

2.3 Tempestissimo
Compare
Choose a tag to compare
@SaltyAom SaltyAom released this 11 Jun 10:27
· 3 commits to feat/tempestissimo since this release
2.3
03e317a
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.

I'm very proud to announce the new release of Niku.
A lot of research and effort into this version.

I'm excited to announce the stable release of Niku 2.3 named "Tempestissimo".

Tempest Tairitsu

Named after Tempestissimo composed by t+pazolite, hardcore gothic boss music featured in Arcaea alongside a new character, Tairitsu (Tempest).

This version feature: Tempest Engine, a rewritten internal architecture entirely change.

Tempest Engine

Focused on performance improvement, reducing memory usage, and faster allocation time.
Make possible by new features like, "Flatten Merge", and lazy execution.

Flatten Merge

Flatten Merge is a technique that allows duplicated properties to merge together, allocating only one widget on the duplicated stack.

For example, Padding:

n.Box()
  ..px = 16
  ..py = 8
  ..px = 4

Normally, this would allocate 3 nested Padding widgets which is not good for both allocation time and memory usage.

But with Tempest Engine, it now allocates only 1 Padding instead of 3.

Lazy Execution

Previously, Niku eagerly allocate widgets on mutable getter/setter, which isn't good practice for a reference style like the Stylesheet pattern.

However, with the new architect, the property is now lazily constructed, which means the widget now only holds a "blueprint" for creating a widget instead of creating them instead before build.

This reduced a lot of memory usage when used with the Stylesheet pattern and Psuedo const like ..deps and ..freezed.
Allowing fine tuning performance even better.

The allocation time of Tempest Engine is in fact, faster than native Flutter in terms of reference allocation.

Quotes:

The new Niku "Tempest" Engine outperforms native Flutter in terms of Widget initialization (creation), or near in the most case.
The test was conducted by measuring the creation time of generating 1 million Text with a Container of manual 40 iterations.

Average Result:
Niku: 63.86ms
Flutter: 68.83ms

Mutable Child

Tempest Engine also allows a child to be mutable.

This is why the change of the Niku widget for allowing mutable child matter.

Now it doesn’t have to store build stack anymore, because now Parent Proxy can ensure that the order of parent proxy will not block the child's property anymore.

All it has to do is to separately allocate Parent and Child.
When child property is set, it only affects the child the same as the Parent.

Now when the build method is called, all it has to do is, assign Parent-Child to child builder.

This eliminates the need for allocating the parent build stack., reducing the n amount of Parent widget allocation to only 1.

Codebase Reduction

With Tempest Engine writing for taking advantage of the new feature of Dart.
Rewritten, making everything modular and reusable with abstract class and extension and advantage of Tempest Engine.

Niku 2.3 is able to reduce an entire codebase reduction by 50%.

This means that the shipped version of your app will be even lighter by the currently very lightweight library and even faster.

Tempest Engine performance

With a lot of new micro-optimization, taking advantage of the new Dart feature, Tempest Engine increases a lot of performance your Niku app.

Notable improvements are:

  • Parent Proxy is faster by 50%.
  • Up to 40% better performance for Parent Builder without having to do anything.
  • 8.75x faster for Text reference initialization.

Full Support for Parent Proxy

Parent Proxy allows you to call parent property without using useParent, by accessing via n prefix.
Available for every widget.

Parent Proxy Example

This helps developers to compose parent styling even easier on minimal change to parent property.

Read more at Parent Styling

Flutter 3 and Material 3 Support

Niku 2.3 also adds support for Flutter 3 and supports MacOS on Apple Silicon.

Niku running on Flutter 3 MacOS

Not only partial supports but also taking advantage of the new property in Material 3 supports.

For example:

  • New Typography in Material 3
  • New ripple effects, like .sparkle

No matter what Material version you're using, Niku is able to fully support both versions.

Extension Transformation

Niku 2.3 add a new extension widget transformation.

Notable usage is "Text".n, which transforms a String to Text as a shortcut.

Reducing character to type in order to allocate widget.
Text Transform example

Extension Transformation also takes advantage of the Material Typography System.
Allowing you to directly apply style from Material 3 Typography without the need of context thanks to Tempest Engine.
Typography Transform

Recap

Phew, that's a lot to unpack.

But to recap:

  • Featuring Tempest Engine, you will gain a free performance boost without having to do anything.
  • 50% library size reduction.
  • Flutter 3 supports, taking advantage of Material 3 and macOS.
  • Extension Transformation, reducing the need for widget allocation with a new shortcut.
  • And much more with notable change under the release note.

Tempest Engine is briefly discussed here, but if you want to understand how the new Tempest Engine works, you can take a look into But how does Tempest Engine in Niku work?.

So, that's pretty much all for this release, until the next time we meet again with a new exciting updates and features.

Now for notable change for this version and migration guide:

Breaking Change:

  • Rename the following property on Image:
    • circleProgress -> useCircleProgress
    • linearProgress -> useLinearProgress
  • Rename on to deps, and useGesture to on.
  • Add labelText as replacement of label which is now accept Widget
  • Move useTextStyle to useNikuTextStyle in NikuButton to add useTextStyle for NikuState
  • Remove useNiku, nikuConstraints, nikuPadding, nikuMargin from Niku and Parent Proxy.

Feature:

  • Add material 3 shortcut.
  • sparkle on NikuButton as shortcut for ..splashFactory = InkSparkle.splashFactory
  • Add Material 3 Typography initialzation shortcut, and Text Factory
    • displayLarge
    • displayMedium
    • displaySmall
    • titleLarge
    • titleMedium
    • titleSmall
    • bodyLarge
    • bodyMedium
    • bodySmall
    • labelLarge
    • labelMedium
    • labelSmall
  • Internal architecture changed called Tempestissimo.
    • Significant performance improvement, parent builder rewrite
    • Parent Property builder now lazily executed
    • Flatten and parent property
  • Add ExplictParentBuilder to quickly handle single use of parent builder
  • New hook: useShadow
  • Add new property, borderRadius, shadow, highlightColor, focusColor, hoverColor

Change:

  • Add .offstage, .show shortcut
  • Update .useScrollbar to Flutter 3
  • .hidden now based on Offset
  • Initial work with Flutter 3 and Material3.
  • useThemeSelector now can accept nullable value
  • Refactored Proxy, now has 50% less code and much cleaner
  • Parent Builder architecture rewrite, name Tempestissimo.
  • rounded now use NikuRounded under the hood to auto inherit borderRadius for the next builder, eg. shadows, and border.
  • Deprecate UseQueryMacro<T>, merged into NikuBuildMacro<T>

Bug fix:

  • Text Theme doesn't update on Brightness change
  • _applyConstraints, _applyPadding, _applyPositions cause Stackoverflow
  • Gap now doesn't use square ratio, the content cross-dimension is now preserved.
Assets 2