ncScale

ncscale

Check List: 25 Ways To Optimize iOS App Performance in 2024

Fabric.js is a powerful library for handling Canvas interactions and rendering. While it's already a performant library, there are certain techniques you can employ to further improve the interaction and rendering speed. In this article, we will explore some valuable tips for optimizing performance in Fabric.js. Content Overview Utilize renderonAddRemove EnlivenObjects instead of loadFromJSON Optimize by excluding non-interactive shapes Utilize fabric.StaticCanvas Fine-tune object properties Enable object caching Use requestAnimationFrame Minimize Redraws Use object grouping Limit object complexity Use event delegation for interactivity Optimize rendering performance with fabric.util.requestRenderAll() Optimize image loading with lazy loading Dispose of unused objects and canvases Utilize renderOnAddRemove One of the recommended tips for optimizing performance in Fabric.js is to set the property to false when initializing the canvas. By adding to the fabric.Canvas constructor, you prevent Fabric from rerendering the entire canvas whenever an object is added or removed. renderOnAddRemove { renderOnAddRemove: false } This significantly improves performance during the initial load when adding multiple shapes to the canvas. const canvas = new fabric.Canvas("myId", { renderOnAddRemove: false });
canvas.renderAll(); // Call this whenever you want changes to be visible on the canvas EnlivenObjects instead of loadFromJSON While is a useful function for JSON to the canvas, it has some drawbacks. It clears the canvas before loading the JSON objects and automatically calls renderAll, which can be inefficient if you have additional operations to perform afterward. loadFromJSON deserializing Instead, you can use the function to parse the serialized Fabric.js JSON and add the objects to the canvas manually. enlivenObjects The rendering can be controlled more easily this way. const canvas = new fabric.Canvas("myId", { renderOnAddRemove: false });
fabric.util.enlivenObjects([{}, {}, {}], (objs) => {
    objs.forEach((item) => {
        canvas.add(item);
    });
    canvas.renderAll(); // Make sure to call this once you're ready!
}); Optimize by excluding non-interactive shapes Imagine you have a Fabric.js canvas with multiple shapes, but some of them are static and don't need to be interacted with. You can convert those non-interactive layers into image representations. Here's an example: // Convert non-interactive layers to images
var nonInteractiveLayer = new fabric.Rect({
    width: 200,
    height: 200,
    fill: 'red'
});
var image = new Image();
image.src = canvas.toDataURL('png');

// Render the image as an HTML <img> tag
document.body.appendChild(image);

// Overlay the canvas on top of the image
canvas.setOverlayImage(image, canvas.renderAll.bind(canvas)); By rendering non-interactive layers as images, you reduce the workload on Fabric.js and improve performance. Utilize fabric.StaticCanvas If you don't need interactivity in your canvas, you can use fabric.StaticCanvas instead of . fabric.Canvas Here's an example: // Create a static canvas
var staticCanvas = new fabric.StaticCanvas('myCanvas');

// Add objects to the static canvas
var rect = new fabric.Rect({
    width: 100,
    height: 100,
    fill: 'blue'
});
staticCanvas.add(rect);

// Perform other operations on the static canvas
// ...

// Render the static canvas
staticCanvas.renderAll(); Using instead of improves performance by avoiding the rendering of controls, borders, and corner detection. fabric.StaticCanvas fabric.Canvas Fine-tune object properties To optimize performance, you can fine-tune certain properties of objects in Fabric.js. Here are some examples: // Disable selection for an object
object.selectable = false;

// Disable controls and borders for an object
object.hasControls = false;
object.hasBorders = false;

// Disable rotating point for an object
object.hasRotatingPoint = false;

// Disable selection for the entire canvas
canvas.selection = false;

// Toggle skipTargetFind for mouse movement optimization
canvas.skipTargetFind = true; // or false, depending on your needs By adjusting these properties, you can improve performance by avoiding unnecessary rendering of controls, borders, and object corner detection during mouse movement. Enable object caching Fabric.js provides automatic object caching, where objects are pre-painted on an offscreen canvas and then copied onto the main canvas during the rendering process. Object caching can significantly improve performance, especially when dealing with complex objects or large SVGs. By default, object caching is enabled in Fabric.js. You can customize the caching behavior using the following properties: : When set to , objects are cached on an additional canvas. By default, this property is for browsers and for Node.js. objectCaching true true false : When set to , Fabric.js checks object properties for cache invalidation. If disabled, you may need to manually invalidate the cache when necessary. By default, this property is . statefulCache true false : When set to , cache regeneration is disabled during scaling operations. This can help avoid blurry effects during scaling. By default, this property is . noScaleCache true true : This flag indicates whether the object's cache needs to be rerendered. It is automatically set to after cache regeneration. dirty false : A function that, when returning , forces the object to have its own isolated cache, even if it is inside a group. By default, this function returns . needsItsOwnCache true false Please note that the specific properties mentioned in the article may vary depending on the Fabric.js version you are using. Use requestAnimationFrame To ensure smooth and efficient animation in Fabric.js, use the function to update the canvas. Syncing this function with the browser's rendering engine results in better performance and smoother animations. requestAnimationFrame Here's an example: function animate() {
  // Update canvas and objects here

  // Request the next animation frame
  fabric.util.requestAnimFrame(animate);
}

// Start the animation
animate(); By using , you optimize the animation performance in Fabric.js. requestAnimationFrame Minimize Redraws To avoid unnecessary redraws and improve performance, use the property to track changes and selectively render only the objects that need updating. It is especially useful when you have a large canvas with a lot of objects on it. dirty Here's an example: // Set an object as dirty to indicate changes
object.dirty = true;

// Render only dirty objects
canvas.renderAll();

// Reset dirty state after rendering
object.dirty = false; By minimizing redraws to only the necessary objects, you optimize performance in Fabric.js. Use object grouping When you have multiple objects that are frequently updated together or share common properties, consider grouping them using . Grouping objects reduces the number of individual objects that Fabric.js needs to render and update, improving performance. fabric.Group You can still interact with and manipulate the grouped objects as a single entity. Here's an example: // Create objects
var rect1 = new fabric.Rect({
    width: 50,
    height: 50,
    fill: 'red'
});
var rect2 = new fabric.Rect({
    width: 50,
    height: 50,
    fill: 'blue'
});

// Group objects
var group = new fabric.Group([rect1, rect2]);

// Add group to the canvas
canvas.add(group); Limit object complexity If you have complex objects with a large number of points, paths, or patterns, consider simplifying or optimizing them to improve performance. Simplifying the geometry or reducing the number of points in paths can significantly reduce the rendering and manipulation time for those objects. Additionally, avoid using overly large or high-resolution images as object fills or patterns, as they can slow down the rendering process. Use event delegation for interactivity With Fabric.js, you can respond to user interactions, such as clicks, mouse movements, and keyboard inputs. However, attaching event listeners to each individual object on the canvas can become inefficient, especially with a large number of objects. To optimize performance, you can utilize event delegation. Instead of attaching event listeners to each object, you attach a single event listener to the canvas itself and use event delegation to handle the events. of using event delegation for mouse clicks: Here's an example canvas.on('mouse:down', function(event) {
  var target = event.target;
  // Handle the click event on the target object
  if (target) {
    // Do something with the clicked object
  }
}); By using event delegation, you reduce the number of event listeners and improve performance, especially when dealing with a complex canvas with many interactive objects. Remember to adjust the event types and event handling based on your specific requirements, such as 'mouse:move', 'mouse:up', or other relevant events for the interactions you want to support in your application. Optimize rendering performance with fabric.util.requestRenderAll() Fabric.js provides a utility function called that can be used to optimize rendering performance, especially when you have multiple changes happening on the canvas simultaneously. fabric.util.requestRenderAll() Instead of calling multiple times after each change, you can use to batch the rendering calls and ensure efficient rendering. canvas.renderAll() fabric.util.requestRenderAll() Here's an example: fabric.util.requestRenderAll(); // Request rendering for all changes

// Make multiple changes to the canvas
object1.set({
    left: 100,
    top: 100
});
object2.set({
    fill: 'blue'
});
object3.remove();

// Call renderAll() once after making all the changes
canvas.renderAll(); By using , you optimize rendering performance by avoiding unnecessary intermediate rendering calls and ensuring that the final rendering is done efficiently. fabric.util.requestRenderAll() Use canvas.renderAll() or canvas.requestRenderAll() at the appropriate point in your code to trigger actual canvas rendering. Optimize image loading with lazy loading If your canvas contains a large number of images or complex image assets, loading all of them upfront can slow down the initial rendering process. To improve performance, consider implementing lazy loading techniques for image assets. Lazy loading involves loading images only when they are needed or when they come into the viewport. By deferring the loading of images that are initially out of view or not immediately required, you can reduce the initial load time and improve the overall performance of your Fabric.js canvas. of lazy loading images in Fabric.js Here's an example var imageElement = document.createElement('img');
imageElement.src = 'path/to/image.jpg';

// Add the image to the canvas when needed
imageElement.onload = function() {
    var fabricImage = new fabric.Image(imageElement);
    canvas.add(fabricImage);
}; By dynamically loading images when necessary, you can optimize the performance of your canvas and provide a smoother user experience, especially when dealing with large or numerous image assets. Remember to handle any error cases and implement appropriate fallback mechanisms to ensure that images are still loaded correctly even if lazy loading fails for any reason. Implementing lazy loading for images can be particularly beneficial when dealing with complex applications or scenarios where image assets are fetched dynamically based on user interactions or specific events. Dispose of unused objects and canvases When you no longer need certain objects or canvases in your Fabric.js application, it's important to dispose of them properly to free up memory and improve performance. Canvas objects that are no longer needed should be removed from the canvas by calling the method. canvas.remove(object) To properly dispose of canvas objects that are no longer in use, call . This will release any resources associated with the canvas and improve memory management. canvas.dispose() Here's an example: // Remove an object from the canvas
canvas.remove(object);

// Dispose of a canvas
canvas.dispose(); By disposing of unused objects and canvases, you prevent unnecessary memory usage and improve the overall performance of your Fabric.js application. It's important to regularly check your code for any objects or canvases that are no longer needed and properly dispose of them. This practice helps maintain a lean and efficient application, especially when dealing with large or complex scenarios. Conclusion In conclusion, Fabric.js is a powerful library for Canvas interactions and rendering. To optimize its performance, you can employ the following techniques: : Set the renderOnAddRemove property to false when initializing the canvas to prevent the entire canvas from being rerendered when objects are added or removed. Utilize renderOnAddRemove : Instead of using loadFromJSON, use enlivenObjects to manually add serialized JSON objects to the canvas, giving you more control over rendering and additional operations after loading. Use enlivenObjects instead of loadFromJSON : Convert non-interactive layers into image representations to reduce the workload on Fabric.js. Render those layers as images and overlay the canvas on top. Optimize by excluding non-interactive shapes : If interactivity is not needed, use fabric.StaticCanvas instead of fabric.Canvas to avoid rendering controls, borders, and corner detection. Utilize fabric.StaticCanvas : Adjust object properties like selection, controls, borders, rotating points, and canvas selection to optimize performance. Fine-tune object properties : Take advantage of automatic object caching in Fabric.js to improve performance for complex objects or large SVGs. Customize caching behavior using properties like , , , , and . Enable object caching objectCaching statefulCache noScaleCache dirty needsItsOwnCache : Use to update the canvas for smooth and efficient animation. Use requestAnimationFrame requestAnimationFrame : Use the property to track changes and selectively render only the objects that need updating. Minimize redraws dirty : Group objects together using fabric.Group to reduce the number of individual objects that need rendering and updating. Use object grouping : Simplify or optimize complex objects with a large number of points, paths, or patterns to improve performance. Limit object complexity : Attach a single event listener to the canvas and utilize event delegation to handle events for multiple objects efficiently. Use event delegation for interactivity : Use this utility function to batch rendering calls when making multiple changes to the canvas. Optimize rendering performance with fabric.util.requestRenderAll() : Implement lazy loading techniques to load images only when needed, reducing initial load time. Optimize image loading with lazy loading : Properly remove objects from the canvas and dispose of unused canvases to free up memory and improve performance. Dispose of unused objects and canvases You can optimize Fabric.js' performance and enhance your applications' user experience by applying these techniques.

Optimizing Performance in Fabric.js 5: 14 Best Practices and Tips

Tutorial: Swift and SwiftUI for Data Science iOS Development

The iOS is one of the most popular operating systems in the world today. This means that developers need to build applications to serve the needs of users of devices that rely on the iOS. However, development could become a Herculean task the moment you try doing everything from scratch. Why reinvent the wheel? With an open source platform like , you can very easily get to implement the projects of great developers and use them to add great features to yours. The libraries discussed in this article are arranged in order of a number of stars and they range from libraries for creating great calendars to improving user interfaces and making the development process very easy in general. Without wasting time, let’s get into the thick of things. GitHub Lottie-Ios 11 915 ★ Pod 2.1.5 Lottie is an iOS library for parsing Adobe After Effects animations. It does this by utilizing the Bodymovin After Effects plugin and ensuring that the animations are rendered beautifully on mobile and web platforms. With this, development is more enjoyable as designers can easily create beautiful animations to make the users marvel. You can install this library using Cocoapods. Simply add the pod to your podfile using: pod 'lottie-ios' And run using: pod install After this, you can import it in Objective C using: #import <Lottie/Lottie.h> And in Swift using: import Lottie Just in case you feel less occupied, Airbnb invites you to contribute to this open source iOS library. You can learn more from the and . GitHub official websites _Our new open-source tool makes adding animation to native apps a snap._medium.com Introducing Lottie Chameleon 10 458 ★ Pod 2.1.0 Here is an iOS library that helps improve the user interface. Chameleon is a flat color framework for iOS, which helps make development a breeze. With this powerful tool, your application is sure to get a very beautiful interface. It is known that while picking colors, the choice of the right RGB values need to be made. But with Chameleon, it is easier to get those great color combinations and saving yourself lots of frustration. Using Cocoapods, Chameleon can be installed by simply adding the following command to the podfile: use_frameworks! pod 'ChameleonFramework' You can learn more from the and . GitHub official websites Chameleon basic flat colors FastImageCache 7 671 ★ Pod 1.3 The process of switching from on-disk image data and then rendering it as a core animation layer is usually time, energy and resources sapping. However, with FastImageCache, images of similar sizes are stored together ensuring that it persists and the return of the image data to the user is faster. Fast Image Cache manages cache expiry based on the recency of image usage, making development process faster and less tasking. This iOS library can easily be installed using which makes integration less time-consuming. Cocoapods You can learn more from the and . GitHub official websites FastImageCache data structure FSCalendar 5 789 ★ Pod 2.7.9 This is a quick calendar development library for iOS. With FSCalendar you can create amazing calendars for your iOS apps which are compatible with Objective-C and Swift without having to code it up from scratch, making for a faster development experience. You can easily install it using . Cocoapods After installation, you can include it in your iOS8+ apps using: use_frameworks! target '<Your Target Name>' do pod 'FSCalendar' end And for your iOS7+ apps using: target '<Your Target Name>' do pod 'FSCalendar' end To use it for iOS7+ you need for compatibility. Check out page for more information. NSCalendarExtension Github XLForm XLForm structure 4 799 ★ Pod 4.0.0 Looking for an iOS library for creating table view forms? XLForm is one of the most powerful, efficient and customizable libraries for developing dynamic table-view forms. Development becomes a great experience and you get to save a lot time and get great results too. Let’s say you can eat your cake, and have it. XLForm can easily be installed using Cocoapods. It can be added to the pod with the command: pod 'XLForm', '~> 4.0' And then: pod install If you prefer using Swift for development, XmartLabs the creators of this great library have also created for better creation of forms using Swift. Eureka Learn more on . Github JTAppleCalendar 4 082 ★ Pod 7.1.4 Just like FSCalendar, JTAppleCalendar can also be used to create lovely calendars with a great design which are also very customizable. You can easily create custom cells and calendar views. It is installed using . You can integrate the JTAppleCalendar into your project using: Cocoapods source 'https://github.com/CocoaPods/Specs.git' platform :ios, '10.0' use_frameworks! target '<Your Target Name>' do pod 'JTAppleCalendar', '~> 7.0' end Then, run the following command: pod install You can learn more from the and . GitHub official websites JLRoutes 3 953★ Pod 2.0.5 This is an iOS library for URL routing by using just a simple block-based API. Created by Joel Levin, what JLRoutes does is to efficiently manage the URL routes for the schemes in your iOS app. What makes JL Routes great to use is its support for wildcard matching and route namespaces making the process smoother and less time-consuming. Install JLRoutes using . Cocoapods It is also available for installation using Carthage. Simply add github "joeldev/JLRoutes" to your Cartfile. Check out page and . Github Official documentation JLRoutes frame structure JBChartView 3 752 ★ Pod 3.0.13 At one point or the other during development, there is a need to visualize data for the users to see. With JBChartView created by JawBone, it is easier. JBChartView is an iOS-based charting library for both line and bar graphs.It makes the creation of beautiful charts effortless and faster. As a plus, it comes with a lot of customization options. Apart from supporting the creation of line and bar graphs, it also supports Drop-in UI view subclass and the expanding and collapsing of animations. JBChartView can be installed using Cocoapods and then added to your project by adding the following command to your podfile: platform :ios, '6.0' pod 'JBChartView' Learn more on . Github BFMSimpleLineGraph 2 665 ★ Pod 4.1 Here is another charting library for iOS. BFMSimpleLineGraph is a library that helps developers create quality line graphs for their apps with great customizability as well. A downside is that it doesn’t support any other graph type except line graphs, however, this doesn’t mean it is less useful as it creates interactive graphs as well. It is an easy to install the library, is lightweight and doesn’t have dependency issues. Talking about setting it up, you can do it using Cocoapods by simply adding the following command into the podfile: pod 'BEMSimpleLineGraph' Github link (2,660 Stars): Check out page and Github Official documentation. FontAwesomeKit What’s an application with poor font types? That’s most likely an application with a poor user interface. FontAwesomeKit is an iOS library created by Pride Chung that makes it easier create beautiful app designs by choosing great fonts. It has a large support for lots of font providers: Currently, FontAwesomeKit supports 6 different icon fonts such as FontAwesome 4.7, icons, Zocial, ionicons, Octicons and Material 2.0.0. Foundation It can easily be installed using Cocoapods by adding the following to the podfile: pod 'FontAwesomeKit', '~> 2.2.0' The font libraries can also be added into the podfile using: pod 'FontAwesomeKit/FontAwesome' pod 'FontAwesomeKit/FoundationIcons' pod 'FontAwesomeKit/Zocial' pod 'FontAwesomeKit/IonIcons' pod 'FontAwesomeKit/Octicons' pod 'FontAwesomeKit/Material' The podfile can then be run using: pod install Visit page. Github Wrapping it up The use of libraries makes the development process royal and faster, and the libraries we have taken a look at have great capabilities. However, this is not to say that they are the only iOS libraries out there, there are more. A recap of the libraries discussed: for animation. Lottie-Ios , for design. Chameleon FontAwesomeKit , for customizable calendars. FSCalendar JTAppleCalendar for form creation. XLForm for URL routing. JLRoutes , for data visualization. JBChartView BFMSimpleLineGraph What else are you waiting for? Go out those libraries to use in your projects. Written by Anton Shaleynikov

Stories, News & Mentions about NCSCALE

Ncscale’s Stories on HackerNoon