Angular

Ignite your way with Infragistics Ultimate Developer Toolkit

Published Oct 31, 2019

Updated Feb 14, 2023

11 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

Infragistics is celebrating its 30th anniversary! Throughout the years, Infragistics built its strategy around two strong pillars: embracing the latest and greatest technologies, and focusing on high-performance and speed. These main pillars enriched developers, and their communities, with toolsets that made development enjoyable, and productive at the same time.

Infragistics presents the Ultimate suite as a single platform for UX design, and enterprise app development, for the web, desktop, and mobile. The suite offers more than 100 beautifully styled, high-performance grids, charts, and other UI controls.

Infragistics thought of every detail in the development life-cycle process. They offer prototyping tools to help you sketch your designs from the client’s early inception stage, allowing you to work on the UX, finalize the layout, and even orient the developer to build the final app.

In this introductory article on their Ignite UI suite, I will explore the different platforms supported by Infragistics, and will then delve into more details on the Ignite UI for Angular suite.

Infragistics Ultimate Developer Toolkit

Infragistics provides UI components for a variety of frameworks and platforms. This includes ones for the Web (ASP.NET, Angular, React and JavaScript), Desktop (Windows Forms and WPF), and Mobile (Xamarin, iOS and Android).

The components are served in packages. For instance, when developing with React, you would only install the packages for Ignite for React.

Here’s a list of the supported platforms and their corresponding components.

Web

Indigo Design A unified workspace for visual design, UX prototyping, and code generation for Angular development.

Ignite UI for Angular Infragistics wraps together more than 50 Material-based UI native components, designed, and built on an Angular platform.

Ignite UI for React A set of native UI components for React developers, featuring a high-performance data grid, and real-time high-volume data charts.

Ignite UI for JavaScript This package offers more than 100 HTML5 / JavaScript jQuery components with wrappers for React, Angular & ASP.NET MVC.

Infragistics Ultimate UI for ASP.NET ASP.NET AJAX UI controls.

Desktop

Infragistics Ultimate UI for Windows Forms This package contains more than 100 fully-featured Microsoft Office-style UI controls.

Infragistics Ultimate UI for WPF This package contains WPF native UI controls.

Mobile

Infragistics Ultimate UI for Xamarin This package contains Xamarin native UI components including Charts, Grid, Scheduling, and much more.

Infragistics Ultimate UI for iOS This package contains native UI controls for both iPad and iPhone apps.

Infragistics Ultimate UI for Android This package contains lightning-fast native UI controls for Android apps.

Prototyping

Infragistics offers the Indigo.Design Desktop to build prototypes for User Stories to share with peers for review, and collaboration. This software comes in two flavors for both Windows and Mac OS machines. Here’s a link to the software’s official documentation.

In addition to all the packages listed, Infragistics puts great effort in delivering an easy-to-follow, and extensive documentation for all their platforms, and UI components. You can consult the document anytime by visiting the Infragistics Help documentation website.

Also, Infragistics offers a set of reference apps that you can look at, take ideas from, and that allow you to see, in real-time, how the UI components are being used and integrated inside apps. You can have a look at the reference apps by visiting the Infragistics Apps Gallery website.

Ignite UI for Angular

Infragistics has placed a great emphasis on developing their Angular suite. They offer native UI components for Angular that are based on the Google Material design standards. In addition, they enrich the Angular app development with a unique, and valuable experience, by offering the Sketch UI kits.

The Sketch UI kits have a one-to-one mapping with all the Angular components they offer. The designer opens Sketch, loads the Sketch UI kits, and then designs the app screens, using “native” Ignite UI for Angular components. The end result is a prototype that is uploaded to the Infragistics Cloud, and shared with peer developers, designers, and stakeholders to review, comment on, and use to produce a final design prototype.

The developers can then take prototype URLs, go to Visual Studio Code per se, install the Infragistics extension, and generate code assets for their Angular app, based on the prototype. The extension generates Angular Components based on the screens baked inside the prototype.

The Ignite UI for Angular suite aims to help developers build modern, high-performance HTML 5 JavaScript apps for modern desktop browsers, mobile experiences, and progressive web apps (PWA).

Prerequisites

Before you can start using Ignite for Angular, you must have the following installed on your machine:

Visual Studio Code (VS Code). You can use any other code editor, but in order to make full use of the rich support Infragistics offers for Angular development, it is recommended that you use VS Code.
Node.js and NPM. This requirement is standard for developing front-ends using Angular, React, Vue and even vanilla JavaScript.

Ignite UI CLI

Infragistics takes that extra step, and offers the Ignite UI CLI. This is a Command-Line Interface by Ingratistics.

The easiest way to create, and scaffold an app with Infragistics, is to use the CLI. This CLI is not only used with Angular, but can also be used for React and jQuery apps.

Here’s a step by step guide on how to generate your first app using the Ignite UI CLI.

You start by installing the Ignite UI CLI as a global dependency on your machine by issuing the following command:

npm install -g igniteui-cli

Once the installation process is finished, you can start the tool using either guided experience or specific commands.

For instance, to create a new Angular app, you issue the command:

ig new <project name> --framework=angular --type=igx-ts

To add a new Component to your app you issue:

ig add <component/template> <component_name>

You can read more about the CLI on the Ignite UI CLI official page.

Selection of Angular Components

Going through all of the Angular components in depth now, isn't useful. I have highlighted a few that interested me, and will give you a small overview of what is offered.

Financial Chart

The Financial Chart is one of the most popular and advanced charts offered by Infragistics. This type of chart is used to visualize financial data using a simple, and intuitive API.

To play with a live Financial Chart, here’s a sample hosted on StackBlitz: {% stackblitz angular-ytbzfi %}

Data Chart

Infragistics Angular Data Chart is the most extensive, and feature-rich, chart on the web today. It supports chart compositions (multiple charts overlaid), axis, series, legend, and annotation layers. Being highly customizable, it offers many more options, and features.

Something special about this chart is the long list of series types supported by default. The list includes, but is not limited to:

An example of a Radial Series chart is as follows:

You can find the entire list here: Data Chart Series Types.

To play with a live Data Chart, here’s a sample hosted on StackBlitz: {% stackblitz angular-bv857d %}

Mask

You apply the igxMask directive on a text input field, and you can control the user input, and format the visual value, based on configurable mask rules. You have a rich set of masking rules to choose from.

To use this directive, start by importing the following Angular Modules into your app module:

// app.module.ts

...
import { IgxMaskModule, IgxInputGroupModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxInputGroupModule, IgxMaskModule]
    ...
})
export class AppModule {}

Then you can apply an Input Mask inside your components. The example below shows how you can use a Phone Input Mask:

<igx-input-group>
    <igx-prefix>
        <igx-icon>phone</igx-icon>
    </igx-prefix>
    <label igxLabel>Phone</label>
    <input igxInput type="text" [igxMask]="'(####) 00-00-00 Ext. 9999'"/>
</igx-input-group>

If you would like to play with a live Mask component, here’s a sample hosted on StackBlitz:

{% stackblitz angular-yh3dpu %}

The Navigation Drawer is one of my favorite components. It provides a smooth and smart navigation experience for developing Web apps that will be used on Mobile devices.

The Navigation Drawer is a side-navigation container. It can rest above content, and slide in/out of view or be pinned to expand/collapse within content. The component is highly configurable via its input properties: Mode (pinned, open, mini-variant) and Position (Right and Left). The mini-variant mode renders the side-navigation bar with icons only instead of showing both the icon, and text of the item.

Installing and using this component is no different from the rest of component offered by Ignite for Angular.

To play with a live Navigation Drawer component, here’s a sample hosted on StackBlitz: {% stackblitz angular-rsizth %}

Layout Manager

The Layout Manager directive, which is part of Ignite UI for Angular, is a wrapper on-top of Flexbox. You can organize and structure your HTML markup without having to write a single CSS selector for the layout.

The Layout Manager focuses on giving Angular developers a seamless design experience when developing, and laying out their apps.

To use this directive, start by importing the IgxLayoutModule Angular Module into your app module:

// app.module.ts

...
import { IgxLayoutModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxLayoutModule ]
    ...
})
export class AppModule {}

Then you can apply the igxLayout, igxFlex, and other related directives to your HTML markup as follows:

<div class="layout-box" igxLayout igxLayoutDir="row">
              <div class="layout-box__el" igxFlex>1</div>
              <div class="layout-box__el" igxFlex>2</div>
              <div class="layout-box__el" igxFlex>3</div>
</div>

If you would like to play with a live Layout Manager component, here’s a sample hosted on StackBlitz: {% stackblitz angular-vtetkk %}

DataGrid

Infragistics claims to have developed the fastest high performance Data Grid for Angular platform.

The Grid is, by far, the most customizable Data Grid currently existing for the Angular ecosystem. The team at Infragistics have thought of every single detail a developer might need and want to customize in a Data Grid.

The features include data binding, live data binding (data streaming), editing, row editing, paging, filtering, advanced filtering, sorting, grouping, column moving, column pinning, column resizing, column hiding, searching, toolbar, multi-column header, exporting to Excel, pasting from Excel, and so much more.

You are in the presence of the Infragistics version of Excel Spreadsheets!

Importing and using the Data Grid cannot be simpler!

Start by importing the IgxGridModule Angular Module to the app module:

// app.module.ts

import { IgxGridModule } from 'igniteui-angular';
// Or
import { IgxGridModule } from 'igniteui-angular/grid';

@NgModule({
    imports: [
        ...
        IgxGridModule.forRoot(),
        ...
    ]
})
export class AppModule {}

To embed a Data Grid inside the HTML markup, add the following component:

<igx-grid #grid1 id="grid1" [data]="localData" [autoGenerate]="true"></igx-grid>

To reference the Data Grid from inside the Angular Component code-behind, add the following:

import { IgxGridComponent } from 'igniteui-angular/grid/';
// Or
import { IgxGridComponent } from 'igniteui-angular'
...

@ViewChild('myGrid', { read: IgxGridComponent })
public grid: IgxGridComponent;

It’s that straightforward to start using the Data Grid component for Angular!

Check the Infragistics extensive docs to learn more about customizing, and enabling more features in the Data Grid.

If you would like to play with a live Data Grid component, here’s a sample hosted on StackBlitz: {% stackblitz angular-4oqzke %}

Excel Library

An Excel Library comes as part of the Ignite UI for Angular. The Infragistics Angular Excel Library allows you to work with spreadsheet data using familiar Microsoft Excel spreadsheet objects like Workbooks, Worksheets, Cells, Formulas, and many more.

You can export your app data to an Excel sheet, and also load data from an Excel sheet into your app.

Have a look at the Excel Library page for more examples on all the options, and possibilities available for you.

Moreover, Infragistics offers an Export to Excel service that you can use inside your Angular components, and services.

To use this service, you start by importing the IgxExcelExporterService into the app module:

// app.module.ts

...
import { IgxExcelExporterService } from "igniteui-angular";

@NgModule({
  providers: [ IgxExcelExporterService ]
})

export class AppModule {}

Then, you inject the IgxExcelExporterService into the constructor of the component or service:

// component.ts

...
import { IgxExcelExporterService, IgxExcelExporterOptions } from "igniteui-angular";
...

constructor(private excelExportService: IgxExcelExporterService) {
}

And finally, to export your data to Excel, you call the exportData() function:

// component.ts

...

public localData = [
  { Name: "Eric Ridley", Age: "26" },
  { Name: "Alanis Brook", Age: "22" },
  { Name: "Jonathan Morris", Age: "23" }
];

public exportButtonHandler() {
  this.excelExportService.exportData(this.localData, new IgxExcelExporterOptions("ExportedDataFile"));
}

Indigo Design System

The Indigo Design System offered by Infragistics caught my attention to the extent that I wanted to dedicate a section to talk about this design system, and its versatility, especially for designers, and developers working on Angular apps.

Indigo Design System offers a unified platform for visual design, UX prototyping, code generation, and app development.

You’ve got your designers, and developers, both integrated into a single platform. This design system has a workflow that is depicted as follows:

Designers create designs in Sketch using the Indigo.Design System. The Indigo Design System integrates with Sketch in the form of:
Indigo-Components (Design library with 50+ components that match Ignite UI for Angular)
Indigo-Patterns (A collection of common UI patterns composed of Indigo-Components)
Indigo-Styling (Customize colors, typography, icons, and elevations to match your brand)
Designers share and test prototypes with peer developers, designers, and stakeholders, via a common platform known as cloud.indigo.design.
Use Sketch to create interactive prototypes of your designs and screens.
Share and Collaborate with others: View prototypes on any device, and collect feedback using comments.
Developers generate Angular components, and code from prototypes
Install the Infragistics Extension for VS Code
Load-in a prototype by URL and the code generation process starts

Conclusion

To explore and try all the features of Infragistics Ultimate Developer Toolkit, would require writing books and articles! This article introduces the Infragistics Ultimate Developer Toolkit, and related hyperlinks, that you can follow to read more about the topics.

Still, what has been discussed in this article is the tip of the iceberg when it comes to what the modern and efficient development ecosystem Infragistics offers!

The Infragistics design model for their components and controls is, by far, one of the easiest, and most straightforward model to follow. For instance, when using the Ignite UI for Angular components, you get the feeling that you are using Angular built-in components and services. They’ve done an excellent job giving Angular developers a seamless experience when using their UI components.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Bilal Haidar
Author, Developer, and Mentor: Professional ASP.NET 3.5 Security, Membership, and Role Management with C# and VB | A Complete Guide to VueJS
@bhaidar @bhaidar

SSR Finally a First-Class Citizen in Angular?

I am sure you've already heard about server-side rendering (SSR). Generally, it's a technique used to deliver the HTML content generated by the server to the client. The client-side JavaScript framework then hydrates that HTML content to provide a fully interactive application. SSR provides numerous benefits if used correctly, including improved initial load times, better content indexing by search engines, and improved performance on lower-tier devices. Driven by the need for faster, more efficient web applications, with the rise in popularity of Node.js and, thus, server-side JavaScript, SSR has become a de facto standard in modern web development frameworks. At first, SSR was being provided as a part of meta-frameworks like Next.js, Nuxt, or Analog.js. Then, React introduced React Server Components, which marked a significant milestone in the way we think about front-end development. We think of front-end frameworks as being effectively full-stack, and a purely SPA approach is falling out of favor. However, I'm willing to bet that if you're a developer focused mostly on Angular, you may not have heard as much about SSR as your React counterparts. For a long time, Angular has been mostly focused on the SPA approach, and while we had Angular Universal or Analog.js, it was not as widely adopted. And that makes sense, given that Angular was widely regarded as best suited for complex, interactive applications, such as SaaS products or internal company tools, where SEO and initial load times were not as critical as they are for consumer-facing applications. Nevertheless, we have been blessed with the so-called Angular Renaissance, which has, among other things, brought SSR to the forefront of Angular development with the @angular/ssr package. Let's look at what Angular SSR is, how it works, and how you can get started. @angular/ssr The @angular/ssr package is not new; it was written from scratch. It's still Angular Universal. However, it's been pulled into the Angular CLI repository, and the appropriate schematics have been added to make it easier to use. What that means is that you can now add SSR to your Angular application with a single command: ` and you can generate a new SSR application with: ` And to make SSR a first-class citizen, the Angular team is planning to make it the default in the next version. But surely, it's not only rebranding and some CLI commands, you may say. And you're right. You may remember that hydration in Angular Universal has not been optimal as it was destructive and required essentially a complete re-render of the application, thus pretty much negating the benefits of SSR. With the introduction of non-destructive hydration in Angular 16 and its stability in Angular 17, the Angular team has taken a significant step forward in making SSR a first-class citizen. How to Make an SSR-capable Angular Application Let's look at how to use Angular SSR in practice by creating a simple SSR app. First, we need to create a new Angular application with SSR support: ` That will generate a few server-specific files: - server.ts, which is an Express server configured to handle Angular SSR requests by default but can also be extended to handle API routes, or anything else that Express can handle. - src/app/app.config.server.ts provides configuration for the server application similar to your app.config.ts, which defines the configuration for your client application. Both export an instance of ApplicationConfig - src/main.server.ts bootstraps the server application in a similar way to what main.ts does for your client app by calling the bootstrapApplication function. You should have an SSR application ready just like that. You can verify that by running ng serve. The terminal output should show you information about the server bundles generated, and you should be able to see the default app when going to http://localhost:4200. Open the Developer Tools and check the console to see that hydration is enabled. You'll see a message with hydration-related stats, such as the number of components and nodes hydrated. Speaking of hydration... Client Hydration If you open the src/app/app.config.ts in your new SSR application, you'll notice one interesting provider: provideClientHydration(). This provider is crucial for enabling hydration - a process that restores the server-side rendered application on the client. Hydration improves application performance by avoiding extra work to re-create DOM nodes. Angular tries to match existing DOM elements to the application's structure at runtime and reuses DOM nodes when possible. This results in a performance improvement measured using Core Web Vitals statistics, such as reducing the Interaction To Next Paint (INP), Largest Contentful Paint (LCP), and Cumulative Layout Shift (CLS). Improving these metrics also positively impacts SEO performance. Without hydration enabled, server-side rendered Angular applications will destroy and re-render the application's DOM, which may result in visible UI flicker, negatively impact Core Web Vitals like LCP, and cause layout shifts. Enabling hydration allows the existing DOM to be reused and prevents flickering. Event Replay and Improved Debugging With Angular 18, event replay, a feature that significantly enhances the SSR experience, came into developer preview. Event replay captures user interactions during the SSR phase and replays them once the application is hydrated. This ensures that user actions, such as adding items to a cart, are not lost during the hydration process, providing a seamless user experience even on slow networks. To enable event replay, you can add withEventReplay to your provideClientHydration call: ` Furthermore, Angular 18 takes another step towards making SSR a first-class citizen by enhancing the debugging experience with Angular DevTools. Now, DevTools include overlays and detailed error breakdowns, empowering developers to visualize and troubleshoot hydration issues directly in the browser. Constraints However, hydration imposes a few constraints on your application that are not present without hydration enabled. Your application must have the same generated DOM structure on both the server and the client. The hydration process expects the DOM tree to have the same structure in both environments, including whitespaces and comment nodes produced during server-side rendering. Direct DOM Manipulation The fact that server and client DOM structures must match means that components that manipulate the DOM using native DOM APIs or use innerHTML or outerHTML will encounter hydration errors. The errors are thrown because Angular is unaware of these changes and cannot resolve them during hydration. Examples include accessing the document, querying for specific elements, and injecting additional nodes using appendChild. Detaching DOM nodes and moving them to other locations will also cause errors. Direct DOM manipulation is generally considered bad practice in Angular, so I recommend refactoring your components to avoid it regardless of hydration. However, in warranted cases where refactoring is not feasible, you can use the ngSkipHydration attribute until a hydration-friendly solution can be implemented. You can use it directly in a template: ` or as a host binding: ` > Note: The ngSkipHydration attribute forces Angular to skip hydrating the entire component and its children. So use this attribute carefully, as, for example, applying it to your root application component would effectively disable hydration for the entire application. Valid HTML Structure Another constraint is that invalid HTML structures in component templates can result in DOM mismatch errors during hydration. Common issues include: - without a - inside a - inside an - inside another Again, if you have an invalid HTML, you should fix this regardless of hydration. If you are unsure about your HTML's validity, you can use the W3 validator to check it. Zoneless apps or custom Zone.js Hydration relies on a signal from Zone.js when it becomes stable. Custom or "noop" Zone.js implementations may thus disrupt the timing of this event, triggering the serialization or cleanup process too early or too late. This configuration is not yet fully supported. While Zoneless is already available in developer preview and we could assume this issue will be resolved when it lands as stable, there is no explicit ETA mentioned in the official roadmap. I18n One of the biggest blockers for adoption of client hydration was the lack of support for internationalization with hydration. By default, Angular 17 skipped hydration for components that used i18n blocks, re-rendering them from scratch. In Angular 18, however, hydration for i18n blocks got into developer preview. To enable hydration for i18n blocks, you can add withI18nSupport to your provideClientHydration call. ` Third-Party Libraries with DOM Manipulation The last thing to consider is third-party libraries that manipulate DOM, such as D3 charts. They could cause DOM mismatch errors when hydration is enabled. You can use the ngSkipHydration attribute to skip hydration for components rendered using these libraries. Conclusion The Angular team has been doing great work to make the framework more modern and competitive, hearing the community feedback and adjusting the roadmap accordingly. And SSR is an excellent example of that. With the introduction of non-destructive hydration in Angular 16 and making it stable in Angular 17, the Angular team has taken a significant step forward in making SSR a first-class citizen in Angular. The @angular/ssr package is now part of the Angular CLI, making adding SSR to your Angular application easier. The Angular team plans to make SSR the default in the next version, further solidifying its position in the Angular ecosystem. However, as with any new feature, there are some constraints and best practices to follow when using SSR with Angular. You should be aware of hydration's limitations and ensure your application is compatible with it. However, if you follow the guidelines provided by the Angular team, you should be able to take advantage of the benefits of SSR without any significant issues....

Jun 26, 2024

8 mins

AngularJavaScriptExpress.js

Angular Signals for Simpler State Management and DOM Performance

In this episode of the Modern Web Podcast, host Rob Ocel is joined by Adam Rackis, Danny Thompson, and guest Braydon Coyer, Senior Front-End Developer at LogicGate to talk about using Angular Signals for improved state management and DOM performance. Braydon explains how Signals simplify Angular development and offer better readability and efficiency compared to traditional methods like RxJS. The conversation also touches on hiring in the AI era, discussing challenges around take-home tests and live coding, and how AI tools like ChatGPT are changing the interview process. Chapters - 00:00 - Introduction - 00:57 - The Angular Renaissance - 02:24 - Signals in Angular - 03:27 - Transitioning to Signals - 04:19 - Signals in Utility Development - 05:09 - RxJS and Signals - 07:52 - Signals vs Other State Management Solutions - 09:34 - Testing Signals - 10:29 - Control Flow and Standalone Components in Angular - 12:02 - Angular's Evolution and Accessibility - 13:28 - Angular’s Framework Governance - 17:10 - Hiring in the Age of AI - 19:15 - Pair Programming and Real-Time Problem Solving - 22:24 - The Role of AI in Interviews - 27:58 - Wrapping Up Follow Braydon Coyer Twitter: https://x.com/BraydonCoyer Linkedin: https://www.linkedin.com/in/braydon-coyer/ Github: https://github.com/braydoncoyer...

Oct 30, 2024

1 min

Angular

Introducing the release of Vue 3

Back in October 2018, Evan You announced plans to start building the third version of VueJS. Featuring 30+ RFCs, over 2,600 commits, 628 pull request from 99 contributors, Vue 3's release reflects tireless ingenuity, passion, and hard work. Its release, no doubt, is a cause for celebration for all of the Vue community members who have been eagerly awaiting it. I, for one, am thrilled to share some resources that I believe will help developers migrate to Vue 3: - Vue 2 -> Vue 3 Migration Guide - Vue Router 3.0 -> Vue Router 4.0 Migration Guide - Vuex 4 - Chrome Vue JS DevTools - FireFox DevTools Here at This Dot, we have tracked Vue 3's development from the onset. We have written blog posts, published a book, hosted Vue Meetups, debuted JavaScript Marathon, shared Modern Web Podcasts, and more! Today, we’ll take a guided tour through all the material we have shared on Vue 2 and Vue 3. Blog Posts Here are our latest blog posts on Vue 3: - How to Set Up Storybook in Vue 3 - Async Components in Vue 3 - Your first Vue 3 app using TypeScript - Teleporting in Vue 3 - Content Distribution in Vue 3 - Custom Directives in Vue 3 - Vue 3 Composition API, do you really need it? You may access the remaining blog posts at This Dot Labs Blog. A Complete Guide to VueJS In April 2020, This Dot released A Complete Guide to VueJS by Bilal Haidar. This book is a precise, and detailed resource for learning VueJS, and highlights some top courses for Vue and JavaScript. Most importantly, it gives a brief introduction to almost all the new features in Vue 3. Grab your own copy for free! Vue Meetups We have hosted more than 10+ Vue Meetups in the past year with dozens of speakers, including Evan You, other Vue Core team members, and Vue developers interested in the future of the framework. To watch past meetup recordings, follow this link to get access to all the meetups on one page. JavaScript Marathon This Dot's team delivered six free live Vue JS tutorials during the JavaScript Marathon. Here’s a list of all the VueJS live sessions recordings: - 1 Hour to Learn Vue - Master State Management in Vue with VueX - Master PWA in Vue - Learning Unit Testing in Vue - Pro Tips on Using AWS with Vue - Debugging Vue: Quick Tips and Tricks Modern Web Podcasts This Dot's team delivered more than 40+ podcasts in the last two years. Here’s a link to the Vue JS Podcasts: - S07E1 Modern Web Podcast - Introducing Vite - Evan You’s new project + Vue 3 Updates - S06E12 Modern Web Podcast - Vue 3, Code Education, & the Vue Community - S06E4 Modern Web Podcast - Vue Updates with Chris Fitz, Jake Dohm, and Rob Ocel The Future of Vue The team at This Dot is hardly finished tracking Vue's progress, as well as the progress of many other web based technologies. To join us on our technical exploration journey, be sure to follow This Dot Media on Twitter! If you have specific questions about how to begin your Vue 3 migration, or have general questions about Vue 3, don't hesitate to reach out to us at hi@thisdot.co....

Sep 18, 2020

4 mins

VueJavaScriptWeb Development

How Nuxt Studio is Redefining Developer & User Experience with Baptiste Leproux & Ferdinand Coumau

In this episode of the Modern Web Podcast, Danny Thompson sits down with Ferdinand Como and Baptiste Leproux from Nuxt Labs to uncover the story behind Nuxt Studio, a tool that's transforming how developers and non-technical users interact with Nuxt applications. Ferdinand and Baptiste share how Nuxt Studio bridges the gap between developer customization and user-friendly content management. Built to empower agencies, freelancers, and their clients, Nuxt Studio combines powerful features like live previews, Vue component integration, and schema-driven forms to make managing content seamless. The conversation also explores the broader mission of Nuxt Labs—building sustainable open-source tools that enhance developer experience and meet real-world needs. With insights into the future of Nuxt Studio and its potential to scale for larger organizations, this episode is a must-listen for anyone passionate about innovation in web development. Chapters 1. Introduction and Setting the Stage (00:00:00) 2. The Vision Behind Nuxt Studio (00:03:10) 3. Nuxt Studio’s Core Features (00:08:45) 4. Challenges in Building Nuxt Studio (00:16:20) 5. Target Audience and Use Cases (00:22:35) 6. Sustainability in Open Source (00:29:00) 7. The Future of Nuxt Studio (00:35:10) 8. Nuxt Studio’s Role in the Nuxt Ecosystem (00:42:30) 9. Closing Thoughts and What’s Next (00:48:00) 10. Sponsor Shoutout and Wrap-Up (00:53:20) Follow Baptiste Leproux and Ferdinand Coumau Baptiste Twitter: https://x.com/_larbish Ferdinand Twitter: https://x.com/CoumauFerdinand Baptiste Linkedin: https://www.linkedin.com/in/baptiste-leproux-618842b0/ Ferdinand Linkedin: https://www.linkedin.com/in/ferdinand-coumau-nuxt/ Sponsored by This Dot: thisdot.co...

Nov 20, 2024

2 mins

VueNuxtJS

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Ignite your way with Infragistics Ultimate Developer Toolkit

Infragistics Ultimate Developer Toolkit

Web

Desktop

Mobile

Prototyping

Ignite UI for Angular

Prerequisites

Ignite UI CLI

Selection of Angular Components

Financial Chart

Data Chart

Mask

Navigation Drawer

Layout Manager

DataGrid

Excel Library

Indigo Design System

Conclusion

Bilal Haidar

You might also like

SSR Finally a First-Class Citizen in Angular?

Angular Signals for Simpler State Management and DOM Performance

Introducing the release of Vue 3

How Nuxt Studio is Redefining Developer & User Experience with Baptiste Leproux & Ferdinand Coumau

Let's innovate together!

You might also like

SSR Finally a First-Class Citizen in Angular?

Angular Signals for Simpler State Management and DOM Performance

Introducing the release of Vue 3

How Nuxt Studio is Redefining Developer & User Experience with Baptiste Leproux & Ferdinand Coumau