 Courses from Alex Jover Morales

Progressive Web Apps are just Web pages, but with superpowers.  They load under uncertain network conditions, even offline. They’re fast and engaging, providing the best user experience. They can be installed on your smartphone if the browser supports it, feeling like a native app.

In this course I’m gonna show you how to take an existing Single Page App made in Vue.js and pragmatically convert it to a Progressive Web App by creating a web manifest, then it goes through caching static assets, external resources and streams using service workers, applying code-splitting and lazy loading, notifying new versions of the app or wether is online or offline, understanding the preload and precache directives, finishing up by showing how to audit a Progressive Web App.

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Offline-First Progressive Web Apps (PWA) in Vue.js

In [Use TypeScript to Develop Vue.js Web Applications](https://egghead.io/courses/use-typescript-to-develop-vue-js-web-applications) we’ve seen how TypeScript Vue apps development by creating class based components and using decorators.

This course will extend it, showing you how you can use Vuex with TypeScript in order to manage the state of your Vue app. We’ll see how to type-safe your store, organize the state in modules, modify it using mutations and actions and write Vuex plugins, all by creating a beer shop app throughout the course.

Vue.js State Management with Vuex and TypeScript

TypeScript is a powerful JavaScript superset which brings you first-class static type-checking along with latest ECMA Script features. Vue is one of the most modern libraries for managing the view layer.

Angular has fully adopted TypeScript as its language, and React has broad support for it. But, what about Vue?

This course will show how to take full advantage of TypeScript static typing on Vue apps by using class based components, typing directives and using decorators.

Use TypeScript to Develop Vue.js Web Applications

Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

redux

In [Understand Redux Higher Order Reducers](https://egghead.io/lessons/react-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.

Compose Redux Higher Order Reducers

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

[Prettier](https://github.com/prettier/prettier) is an amazing code formatting tool that has support for TypeScript. With Prettier, you don't need care about code formatting rules. [TSLint](https://palantir.github.io/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](https://github.com/alexjoverm/tslint-config-prettier) in order to combine both seamlessly.

Use Prettier with TSLint without conflicts

 
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`).

Modify State by using Vuex Mutations with TypeScript

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](https://github.com/vuejs/vue-devtools).

Use Vue Tools to Navigate Across the Vuex State

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.

Perform Async Updates using Vuex Actions with TypeScript

**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**. 

Use Vue Router in TypeScript

`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**.

Handle Forms Connected to a Vuex Store using 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.

Access the Root State from a Vuex Module using TypeScript

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

Split Vuex Store into Modules using 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](https://webpack.js.org/guides/code-splitting/). 

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

Lazy Load a Vuex Module at Runtime using TypeScript

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! 

Create Type-Safe Vue Directives in 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.

Use Namespaces in Vuex Stores using 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.

Write a Vuex Plugin using 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.

Call a Root Vuex Mutation or Action from within a Module in 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

Add options to a Vuex plugin using TypeScript

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](https://github.com/kaorun343/vue-property-decorator). 

We’ll also see how we can set types and even default properties on **@Prop**!


Use Properties in Vue Components Using @Prop Decorator with TypeScript

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](https://github.com/vuejs/vue-class-component).

Write a Vue Component as a Class in TypeScript

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.

Alex Jover Morales

Search Results