Egghead Instructor Alex Jover Morales

Alex Jover Morales

Fullstack JS enthusiastic developer. Open Source and TypeScript lover. Software Craftmanship practitioner. Interested in the human side of code



Unlock all of Alex's PRO Lessons
click for instant access!

Browse Alex Jover Morales's lessons.

showing 30 lessons...

Add options to a Vuex plugin using TypeScript

Write a Vuex Plugin using TypeScript

Call a Root Vuex Mutation or Action from within a Module in TypeScript

Use Namespaces in Vuex Stores using TypeScript

Access the Root State from a Vuex Module using TypeScript

Lazy Load a Vuex Module at Runtime using TypeScript

Split Vuex Store into Modules using TypeScript

Handle Forms Connected to a Vuex Store using TypeScript

Perform Async Updates using Vuex Actions with TypeScript

Modify State by using Vuex Mutations with TypeScript

Access State by using Vuex getter functions with TypeScript

Create a Vuex Store using TypeScript

Compose Redux Higher Order Reducers

Understand Redux Higher Order Reducers

Create your own Decorators in Vue with TypeScript

P

Use AOP in Vue Components with TypeScript and Kaop-ts

P

Use Two-Way Binding in Vue Using @Model Decorator with TypeScript

P

Create Type-Safe Vue Directives in TypeScript

P

Watch for Changes in Vue Using the @Watch Decorator with TypeScript

P

Extend Vue Components in TypeScript

Decouple Dependencies Using IoC Containers in Vue with TypeScript and InversifyJS

P

Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript

P

Use Properties in Vue Components Using @Prop Decorator with TypeScript

P

Write a Vue Component as a Class in TypeScript

Use Vue Router in TypeScript

P

Use Vue Tools to Navigate Across the Vuex State

Create a TypeScript Library using typescript-library-starter

P

Use Prettier with TSLint without conflicts

P

Load components when needed with Vue async components

P

Understand lookup types in TypeScript

P
typescript tutorial about Add options to a Vuex plugin using TypeScript

Add options to a Vuex plugin using TypeScript

3:03 typescript

In some cases we may want to pass some options to a Vuex plugin, in order to make it more customizable. This lessons shows how can you make a Vuex plugin accept a persist parameter in order to save the state to the localStorage in TypeScript

typescript tutorial about Write a Vuex Plugin using TypeScript

Write a Vuex Plugin using TypeScript

4:22 typescript

Sometimes we need to apply common functionality to the store. Vuex plugins allow us to access the store which allows direct access to State and Mutation using hooks.

This lesson shows you how you can add a history Vuex plugin that keeps track of the called mutations using TypeScript.

typescript tutorial about Call a Root Vuex Mutation or Action from within a Module in TypeScript

Call a Root Vuex Mutation or Action from within a Module in TypeScript

2:19 typescript

Everything in a Vuex Module is local to itself: the State, Mutations, Actions, Getters. But sometimes you need to call something from the outside. This lesson shows how you can call an external Mutation and Action from within a module in TypeScript.

typescript tutorial about Use Namespaces in Vuex Stores using TypeScript

Use Namespaces in Vuex Stores using TypeScript

2:52 typescript

Even by using modules, they still share the same namespace. So you couldn’t have the same mutation name in different modules. Namespaces solve that by prepending the path of the module to the State, Getter, Action, and Mutation.

This lesson shows how to use namespaces in Vuex modules with TypeScript.

typescript tutorial about Access the Root State from a Vuex Module using TypeScript

Access the Root State from a Vuex Module using TypeScript

1:46 typescript

If you need to access another part of the state from within a module, you could do it by accessing the root state. This lesson shows you how to access the Vuex root state in getters and actions to perform cross-module operations in TypeScript.

typescript tutorial about Lazy Load a Vuex Module at Runtime using TypeScript

Lazy Load a Vuex Module at Runtime using TypeScript

2:43 typescript

Sometimes we need to create modules at runtime, for example depending on a condition. We could even want to lazy load that module by using Webpack’s code splitting feature.

This lesson shows how to lazy load a Vuex module under a determined condition using TypeScript.

vue tutorial about Split Vuex Store into Modules using TypeScript

Split Vuex Store into Modules using TypeScript

4:49 vue

When the Vuex store grows, it can have many mutations, actions and getters, belonging to different contexts. Vuex allows you to split your store into different contexts by using modules.

In this lesson we’ll see how can we split the store in multiple Vuex modules using TypeScript

vue tutorial about Handle Forms Connected to a Vuex Store using TypeScript

Handle Forms Connected to a Vuex Store using TypeScript

2:02 vue

v-model uses 2 way binding to make local state easy to update and connect variables to an input or component, in an implicit way. At the same time, that makes it difficult to combine it with Vuex, since getters and mutations/actions must be called explicitly.

This lesson shows you how you can apply the v-model functionality to a Vuex store by doing it in explicitly in 2 steps on a class-based component using TypeScript.

vue tutorial about Perform Async Updates using Vuex Actions with TypeScript

Perform Async Updates using Vuex Actions with TypeScript

3:30 vue

Mutations perform synchronous modifications to the state, but when it comes to make an asynchronous operation, they become useless.

Actions are a higher layer on the Vuex pattern, which allow to call mutations asynchronously or even call multiple mutations. This lesson guides you through using Vuex actions and type-safe them with TypeScript.

vue tutorial about Modify State by using Vuex Mutations with TypeScript

Modify State by using Vuex Mutations with TypeScript

2:47 vue

Mutations are the only way to modify application state. They make updating state in an atomic and synchronous way easy to reason about.

This lesson will show you how to modify state by using Vuex Mutations. We will add type-safety with TypeScript using the @Mutation decorator (imported from vuex-class).

vue tutorial about Access State by using Vuex getter functions with TypeScript

Access State by using Vuex getter functions with TypeScript

2:38 vue

Accessing state directly can be ok for some cases, but in others we need another representation of state.

This lesson will show you how Vuex getters solve that issue and how to type-safe these getters with TypeScript using the @Getter decorator.

vue tutorial about Create a Vuex Store using TypeScript

Create a Vuex Store using TypeScript

3:32 vue

A Vuex store centralizes the state of your app, making it easy to reason about your state flow.

In this lesson we’ll see how we can create a Vuex store using TypeScript and use it on you class-based component by using the @State decorator from Vuex Class

react tutorial about Compose Redux Higher Order Reducers

Compose Redux Higher Order Reducers

4:34 react

In Understand Redux Higher Order Reducers, I've explained to you how higher order reducers can reduce the amount of reducer logic by reusing it. You can even use multiple higher order reducers, but how?

In this lesson I show you different techniques to compose higher order reducers.

react tutorial about Understand Redux Higher Order Reducers

Understand Redux Higher Order Reducers

3:44 react

Higher Order Reducers are simple reducer factories, that take a reducer as an argument and return a new reducer. In that new reducer, you can customize the behaviour of the original one which helps reducing the reducer logic.

In this lesson, we'll see how to reduce duplicated code by refactoring two different reducers into a higher order reducer.

vue tutorial about Create your own Decorators in Vue with TypeScript

Create your own Decorators in Vue with TypeScript

2:30 vue PRO

We’ve used @Watch, @Inject and more decorators from vue-property-decorator. In this lesson however we will guide you through creating your own decorators in order to add common functionality to your Vue components using TypeScript.

vue tutorial about Use AOP in Vue Components with TypeScript and Kaop-ts

Use AOP in Vue Components with TypeScript and Kaop-ts

7:20 vue PRO

Aspect Oriented Programming, AOP, allows to reuse logic across an entire app in a very neat way, decoupling it from the business logic. Kaop-ts bring us decorators in order to apply AOP. This lesson will show you how you can move cache and exception handling out of your business logic using TypeScript and Kaop-ts

vue tutorial about Use Two-Way Binding in Vue Using @Model Decorator with TypeScript

Use Two-Way Binding in Vue Using @Model Decorator with TypeScript

3:26 vue PRO

Vue models, v-model, allow us to use two-way data binding, which is useful in some cases such as forms. This lesson shows how to use it by creating a custom checkbox component using the @Model decorator in TypeScript.

vue tutorial about Create Type-Safe Vue Directives in TypeScript

Create Type-Safe Vue Directives in TypeScript

4:02 vue PRO

Directives allow us to apply DOM manipulations as side effects. We’ll show you how you can create your own Vue directive to change a component’s colors and type-safe it with TypeScript.

We’ll additionally show how you can pass objects to your directives and make them more flexible!

vue tutorial about Watch for Changes in Vue Using the @Watch Decorator with TypeScript

Watch for Changes in Vue Using the @Watch Decorator with TypeScript

1:40 vue PRO

Vue watchers allow to perform async updates as a side effect of a property change. This lesson shows you how you can watch properties on your class based component and how to use the @Watch decorator for it.

vue tutorial about Extend Vue Components in TypeScript

Extend Vue Components in TypeScript

3:04 vue

This lesson shows how you can extend and reuse logic in Vue components using TypeScript inheritance. It will take you through extending a component, its properties and methods, and how hooks are triggered along the inheritance tree.

vue tutorial about Decouple Dependencies Using IoC Containers in Vue with TypeScript and InversifyJS

Decouple Dependencies Using IoC Containers in Vue with TypeScript and InversifyJS

5:32 vue PRO

Using Object Oriented Programming, OOP, style allows us to apply Inversion of Control, IoC, and more patterns. An IoC container helps decoupling dependencies by using a class constructor or properties to identify and inject its dependencies. This lesson will show you how can you create and use an IoC container to decouple an http client and users service dependencies in a Vue component with TypeScript and InversifyJS.

vue tutorial about Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript

Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript

2:17 vue PRO

Vue 2.2 introduced a simple dependency injection system, allowing you to use provide and inject in your component options. This lesson shows you how to use them using the @Inject and @Provide decorators in tandem!

vue tutorial about Use Properties in Vue Components Using @Prop Decorator with TypeScript

Use Properties in Vue Components Using @Prop Decorator with TypeScript

2:26 vue PRO

With properties we can follow a one-way parent→child flow communication between components. This lesson shows you how you can pass down properties to class based Vue components by using the @Prop decorator from vue-property-decorator.

We’ll also see how we can set types and even default properties on @Prop!

Write a Vue Component as a Class in TypeScript

2:39 vue

Writing Vue components as plain objects has very limited capabilities for TypeScript’s IntelliSense. This lesson will show you how to write components as classes to take full potential of TypeScript static typing by using vue-class-component.

vue tutorial about Use Vue Router in TypeScript

Use Vue Router in TypeScript

3:19 vue PRO

vue-router introduces new hooks into the component. In this lesson we’ll show you how to use these new hooks in your class based Vue components in TypeScript. We’ll also go over how we can create and use routes in Vue.

vue tutorial about Use Vue Tools to Navigate Across the Vuex State

Use Vue Tools to Navigate Across the Vuex State

1:29 vue

Each mutation modifies one part of the state, making it easy to debug and redo-undo modifications. This lesson shows how you can do time-travel navigation and manipulation on you Vuex store by using Vue tools.

typescript tutorial about Create a TypeScript Library using typescript-library-starter

Create a TypeScript Library using typescript-library-starter

5:00 typescript PRO

Creating a library is always a cumbersome process with lots of setup and decisions to make. TypeScript library starter makes this process very easy and automated, using latest in tech configs and libraries such as Rollup, Jest, Prettier, TSLint, TypeDoc...

This lesson will walk you through creating a simple "tell-my-time" library from scratch, formatting and linting the code, generating optimized multiplatform bundles, unit-testing the library and showing up the important bits of the configuration.

typescript tutorial about Use Prettier with TSLint without conflicts

Use Prettier with TSLint without conflicts

1:52 typescript PRO

Prettier is an amazing code formatting tool that has support for TypeScript. With Prettier, you don't need care about code formatting rules. TSLint is a static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors.

This lesson shows you how can use tslint-config-prettier in order to combine both seamlessly.

vue tutorial about Load components when needed with Vue async components

Load components when needed with Vue async components

2:47 vue PRO

In large applications, dividing the application into smaller chunks is often times necessary. In this lesson, we will look at how vue loads async components into your application.

typescript tutorial about Understand lookup types in TypeScript

Understand lookup types in TypeScript

1:55 typescript PRO

Lookup types, introduced in TypeScript 2.1, allow us to dynamically create types based on the property keys of an object. We'll use the function spyOn from Jest to illustrate how lookup types can type-safe function parameters.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?