2.3 Tempestissimo
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".
Named after Tempestissimo composed by t+pazolite, a 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.
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.
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.
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.
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.