Learn Angular-cli, Purescript and React-storybook

PureScript is a small strongly, statically typed language inspired by Haskell and compiles to JavaScript. This means no run-time errors, human readable output, ADTs, and pattern matching (and more!) all at your fingertips.

In this course we will use an [online editor](http://try.purescript.org/) to show basics into PureScript with an instant visual representation, investigate the type system and ways to reason about common programing problems with PureScript. 

As we explore the type system and common problems that are faced when programming in PureScript we will learn plenty of functional programming concepts as PureScript is a purely functional language.

PureScript is a small strongly typed programming language that compiles to JavaScript.

purescript

Functional Programming Concepts in Purescript

PureScript types are very extensive and we are going to experiment with type constructors and how to make then use them.

Basic Data Constructors in PureScript

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

In this lesson, we show how to setup React Storybook into an existing React project. We’ll go through common configuration files and how to adjust them.

Add React Storybook to a Project 

Components trigger actions via function props to notify of events that occur within the Component. We can inspect those events using React Storybook.

Inspect Component Events with React Storybook

Deserializing and serializing JSON manually is a boring, error-prone way to be able to handle JSON. This example shows how you can use Generics in Purescript to automatically derive de/serializers so that once you've written your type definition, you only need a few lines of code to handle JSON.

Automatically de/serialize JSON with Purescript-Foreign-Generics

In Purescript, we can use set data structures using Purescript-Set, but many of its functions come with an Ord typeclass constraint. In this lesson, we'll learn how to understand the typeclass constraints on a function and how to create instances of typeclasses.

Use Sets with Ord Typeclass instances



[React Storybook](https://github.com/kadirahq/react-storybook) is a UI component development environment for React.
With that, you can develop UI components without running your app.

Here I show how to get started with React Storybook.
For more information, have a look at our [documentation](https://getstorybook.io/docs).

Getting Started with React Storybook

React Component stories can be dynamically loaded into React Storybook instead of doing it manually every time.

Load React Storybook Stories Dynamically

PureScript has a REPL (a console you can type expressions into) called `pulp`. In this lesson, we will show how you can use `pulp` to test your modules and functions. We will use code as we would in a file, like `import`ing modules. We will also use REPL specific syntax like `:type` (or `:t` for short) to view type definitions and `:reset` to re-compile changes to our files.

Technologies talked about in this lesson:

[Pulp](https://github.com/bodil/pulp) by [@bodil](https://twitter.com/bodil)
[Psci](https://github.com/purescript/purescript/wiki/PSCi)
[Purescript](https://github.com/purescript/purescript)

Using PureScript's psci with pulp

angular-cli

Generating components with the Angular CLI allows for scaffolding applications quickly. Learn what will be generated for you and how to generate quickly with shortcuts in the desired directory.

Generate components with the Angular CLI

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Getting started with angular development can be difficult, with a lot of moving parts. Allow the Angular CLI to handle those complexities so you can focus on creating great applications.

In this lesson you will learn how to install the Angular CLI from npm, create a new application, serve the new application in the browser and edit it with live-reload.

Install the Angular CLI to Create and Serve an Angular Application

Currying is a significant aspect of functional programming. It allows you to break down one function that takes many arguments into a series of functions that take part of the arguments; this will enable you to build and compose functions together easily.

In this lesson, we will look at what currying is doing under the hood in PureScript, as it is used extensively. 

Join in by going to [the online PureScript editor](http://try.purescript.org/).


Use One Function Argument at a Time with Currying and Partial Application in PureScript

JavaScript does its error-checking at runtime, but PureScript has a compiler, which makes sure that your program has no errors before it converts it all into JavaScript.

PureScript's compiler uses a type system to catch errors so that you aren’t accidentally mismatching your types. We will learn the very basics of type declarations, how they work in a statically typed language like PureScript, and see simple examples of them in action. 

Join in by going to [PureScripts online editor](http://try.purescript.org/)


Specify Function Arguments using Types in PureScript

Pattern matching in functional programming languages is a way to break up expressions into individual cases. 

We are going to go through how to pattern match in PureScript with simple patterns, guards, array patterns and record patterns.

Join in by going to [the online PureScript editor](http://try.purescript.org/).


Break up Expressions into Cases in PureScript using Simple Pattern Matching 

Story is the smallest unit of React Storybook. A story describes a React Component, and its various states and variations. Stories can describe complex components with dynamic properties and data loaded from a service. In this lesson we will write our first React Storybook story.

Write the First React Storybook Story

Algebraic Data Types are a fundamental part of modeling data in Purescript. In this lesson, we'll look at some common methods of defining and using them.

Model problems using Algebraic Data Types (ADTs)

In this lesson, we will learn how to run Purescript with a simple log statement. We use pulp to compile Purescript down to readable javascript.

Use Purescript and pulp to make hello world

In this lesson, you will learn about type alias using records and instances. You'll see how to create a type alias and be able to display its values to a show function utilizing an instance for its type.

Types Alias and Instances in PureScript

React Storybook allows for easy snapshot testing integration with Facebook's Jest testing framework. Snapshot testing allows you to capture the state of your UI and then notify you when that UI has been altered. We can easily create and update snapshots with Storybook!





Jest Snapshot Testing with React Storybook

In this lesson we will our `UiModule`, that has a `LayoutComponent`, `HeaderComponent` and `FooterComponent`. 

We generate `UiModule` by running the following command:
```
ng generate module ui --module app
```

This generates the new module and imports it in our `AppModule`.

We'll create the `LayoutComponent` using:
```
ng generate component ui/containers/layout
ng generate component ui/containers/header
ng generate component ui/containers/footer
``` 

We update our `AppRoutingModule` and add this component to our first route to make it visible. 

The `HeaderComponent` and `FooterComponent` are referenced in the LayoutComponent and we implement the actual templates!

Create Application Layout with Components in an Angular CLI Project

In this lesson we will add the `ProductModule`, where our actual application code will live.

```
ng g m product --routing
``` 

We will add 2 routes to `AppRoutingModule`,  the first is a redirect route that redirects any unhandled paths to `products`. The second route is the actual `products` route, that 'lazy-loads' the `ProductModule`.

We use the `ng` command to create the `ProductListComponent` and `ProductDetailComponent`, which are so called 'containers components'.

Container components are responsible for fetching data, handling routes and passing data into the 'presentational components' 

We will add 2 routes to `ProductRoutingModule`,  one to each of our new Container Components.

Lastly we will use  `ActivatedRoute` in `ProductDetailComponent` to fetch the `:id` from the route.

Topics

Instructors

Content Type

Free or Pro