Learn Mobx, Npm and Redwoodjs

You can’t be everywhere at once. Neither can node packages. But with a utility called npx — included in npm v5.2 and later — you can interact and run with node modules even if they’re not downloaded locally. The same is true for gists and remote branches of GitHub. As long as npm installed, your work can be wherever you are.

This course from Elijah Manor unlocks the power of the npx utility. Over 17 minutes, we will examine the npx package runner and look through various scenarios where the tool is helpful when running node packages from the command line. You’ll learn to use npm to:

- test out various versions of a package
- run packages without globally installing
- run code directly from GitHub
- make working with packages much easier

npm is the package manager for JavaScript. Find, share, and reuse packages of code from hundreds of thousands of developers — and assemble them in powerful new ways.

Execute npm Package Binaries with the npx Package Runner

Developing logic-rich applications is a key skill to have.

The TypeScript–React combination helps you unlock that skill, and it’s a great developer experience in terms of writing understandable and refactorable HTML. But the default state management for React has a long way to go to feel simple and maintainable — and that’s where MobX makes your life so much easier. MobX keeps things simple without using complicated setups like `provider` and `connect` that provide way too little value for all the mental overhead. 

In this course, you’ll see how to model your React application logic using simple JavaScript classes — and with the help of MobX, make those classes the beating heart of your React applications. You’ll learn:

- that you don't need advanced annotations and TypeScript features to use MobX
- how to easily refactor code through TypeScript
- how to use TypeScript to track the flow of state as properties change

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Develop React Applications with Mobx and TypeScript

MobX State Tree (MST) is a library that helps you organize your application states in a very structured manner. It allows you to create a component model, but for your data!

Course instructor Michel Weststrate—creator of Mobx—will teach you to model application state after your problem domain with MST. You will get hands-on practice and see how MST lets you solve problems with its out-of-the-box support for asynchronous actions, patches, snapshots, and middleware.

Over the 17 lessons, you’ll build a little bookshop application using React, MST, and create-react-app, while learning how to manage the lifecycle of your data by describing data models. 

Join Michel in one of the most popular courses on egghead!

Manage Application State with Mobx-state-tree

npm is like a giant library of code building blocks. There are tons of these “blocks”, aka “packages” that we can compose together to build cool things. We can use packages by other developers, but we can also write and publish our own. 

In this course we will learn how to create, publish, and update our own packages. We will create a JavaScript utility module to filter out sensitive words from a string, including tests and development file watching. We will then cover publishing and updating our package. This same approach can be used to create and publish other types of packages too like components (React, Angular, Web Components etc.) and command line interfaces.

Publish JavaScript packages on npm

In this course we will introduce the topic of using npm scripts as a build tool. We will start simple and then continue to build a small website as we introduce new topics. By the end of the course, you'll know how to get started and what tools and techniques are needed for you to create your own set of build scripts.

How to Use npm Scripts as Your Build Tool

MobX is designed to enable building web applications with a complex data model in an intuitive and very performant manner. Using React and MobX is currently the simplest way to build component based web applications.

"Half the code, twice the fun" is how people describe MobX, or "So simple, I cannot believe it just works". 



Manage Complex State in React Apps with MobX

RedwoodJS takes the JAMstack philosophy to the next level. It brings together all the tools modern web development has to offer:

- React
- GraphQL
- Prisma

RedwoodJS abstracts database management away from you so that you can just build your schema and it will do all the plumbing. This collection will go over how to create a RedwoodJS project and the scripts that will help make your developer experience a joy.


Bringing full-stack to the JAMstack

Do you love the JAMstack philosophy but need a database-backed web app? Want great developer experience and easy scaling? Redwood is here! Built on React, GraphQL, and Prisma, Redwood works with the components and development workflow you love, but with simple conventions and helpers to make your experience even better.

redwoodjs

Introduction to RedwoodJS: full-stack framework for JAMstack

Since MST offers a runtime type system, it can create and compose types on the fly, making it possible to reuse logic in new and powerful ways.

In this lesson you will learn:
* That MST types are immutable and composed together behind the scenes
* How to compose types explicitly by using `types.compose`
* How to create dynamic, parameterized types by leveraging that MST types are first class javascript citizens

Create Dynamic Types and use Type Composition to Extract Common Functionality

The ability to pull in just about anything your project needs from npm is amazing, but it can also lead to bundle bloat if you aren't selective about what libraries you pull into your library. In this lesson, we'll take a look at bundlephobia.com, a tool that provides insights about a library's size. With bundlephobia, you can make informed decisions about what libraries you pull into your project and avoid unnecessary bundle bloat.

https://bundlephobia.com/

Make informed decisions about 3rd party npm libraries with bundlephobia

With Node.js installed, bootstrapping a react app is as simple as executing `create-react-app` with `npx`. No further downloads necessary.

Bootstrap a react app using create-react-app

We use `yarn redwood generate page` (`yarn rw` for short) in this lesson to generate an `IndexPage` component. 

The first argument to `yarn rw generate page` is the name of the page you are generating. The second argument is the path you want the page to show up on. So `yarn rw generate page index /` will generate an `IndexPage` component and insert a route entry in our `web/src/Routes.js` file.

We learn that redwood import `React` for you so you don't have to import it manually when you are creating a component.

Generate a Page Using the Redwood CLI

In this lesson, we are going over how to generate a `RedwoodJS` project.

We can create a `RedwoodJS` project with `yarn create redwood-app ./my-redwood-project`.

`yarn` will generate the `RedwoodJS` app in the file folder you specified without installing any globals.

To run the `RedwoodJS` app, we use `yarn redwood dev`. This runs the Redwood client as well as the `GraphQL` backend.

Generate a Redwood Project

RedwoodJS provides a `Link` component that we can use to navigate around our app. We can provide a `to` prop with the path that we want to navigate to.

RedwoodJS takes this a step further and provides a `routes` object from `@redwoodjs/router`. This object is aware of all the routes defined in `web/Routes.js`. This allows us to use the methods on this object rather than referencing the our routes with a string literal. We can then change the route path without having to change all of the references to that route all over our app.

Use RedwoodJS Link and routes Object to Navigate

RedwoodJS gives us a cli command to generate layouts.

`yarn redwood generate layout main`

This will generate a `MainLayout` component in `src/layouts/MainLayout/`. We can use this layout component to define any headers or footers we want to share across multiple pages. 

Extract a RedwoodJS Layout Component

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 38 KB of JS, it has all the mapping features most developers ever need.

leaflet

While there are a few options for building maps, [Leaflet](https://leafletjs.com/) is the most popular. Lucky for us, Leaflet is also available as a ReactJS component library with [React Leaflet](https://react-leaflet.js.org/). We'll use both Leaflet and React Leaflet to build a map in our React app.

To get started, we need to install:

[Leaflet (npmjs.com)](https://www.npmjs.com/package/leaflet) and [React Leaflet (npmjs.com)](https://www.npmjs.com/package/react-leaflet)

**[Click here for exercise instructions](https://github.com/colbyfayock/launchtime-workshop/tree/master/lessons/02%20-%20Adding%20Your%20First%20React%20Leaflet%20Map%20to%20a%20New%20React%20Application#1-installing-our-dependencies)**


Install Leaflet and react-leaflet with NPM in a JavaScript Project

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

Nx has been design to work especially well in large monorepos. One particularity (compare to other monorepo solutions) is that Nx follows the principle of having one single version of a package in the entire workspace. That said, you'll have one version of React, one version of Angular etc.. This helps to keep things consistent, facilitates code sharing as well as easier migrations.
In this lesson we're looking into adding the [material-ui](https://material-ui.com/) package to our React app.

Install and use external npm packages in an Nx Workspace

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

Tests are really important in the software development cycle. But how we can test if our API - or even a page - will support the web traffic and requests our users will create by accessing them?

In this video, you will learn how to create HTTP load and benchmarking tests in Node.js using the autocannon package. With that, we can make sure our API is not consuming too much memory, CPU, or any other resource that can cause slow responses.

Create Load Tests in Node.js Using Autocannon

Applications are driven by state. Many things, like the user interface, should always be consistent with that state.
[MobX](https://mobxjs.github.io/mobx) is a general purpose FRP library that provides the means to derive, for example, a React based user interface automatically from the state and keep it synchronized.

The net result of this approach is that writing applications becomes really straight-forward and boilerplate free.

Sync the UI with the app state using MobX observable and observer in React

This lesson explains how you can build larger trees of react component and how they are managed efficiently by MobX. You will learn how to pass observable data structures around in props and how the Devtools can be used to analyze the performance of your UI.

Pass observable data through props in MobX

This lesson explains how actions can be used to control and modify the state of your application. They help you to structure your code base and integrate well with the MobX React Devtools. Actions automatically create transactions, which group changes together.

Use MobX actions to change and guard state

Derivations form the backbone of MobX and come in two flavors: computed values are values that can be derived from the state automatically. And reactions can be used to manage side effects, such as drawing the user interface. In this lesson you will learn how these concepts relate to each other and how they are optimized automatically by MobX.

Topics

Instructors

Content Type