Learn Ionic, Reason and Svelte

JavaScript community has been shaken recently by a release of Svelte 3 and for a good reason - it's a completely different approach than React or Vue. To quote the docs:

"[Svelte](https://svelte.dev/) is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app."

**The best part?** If you have 26 spare minutes you can learn the basics of Svelte 3 and start building your own apps with it!

Enjoy!



The magical disappearing UI framework

 - The web's JavaScript bloat crisis, solved. Svelte turns your templates into tiny, framework-less vanilla JavaScript.
 - Simple and familiar. Build apps out of composable, easy-to-write blocks using languages you already know.
 - Super fast, rock solid. Compile-time static analysis ensures the browser does no more work than it needs to.

svelte

Up and running with Svelte 3

This course foremost will teach you about the syntax and semantics of the programming language Reason or also referred to as ReasonML. In addition, the course touches on best practices recommended by the official documentation. Each lesson is focusing on a specific feature, concept or best practice and can be watched independently. Still, the whole course is carefully crafted, and each lesson builds up on the previous ones.

Simple, fast & type safe code that leverages the JavaScript & OCaml ecosystems.

reason

Get Started with Reason

Node.js is a well established server runtime that many companies are using worldwide. Express.js is a server framework for Node.js used by over 5 million projects. ReasonML is a type-safe functional language that compiles to Javascript.

This playlist collects the basic pieces of information a programmer needs to get started building servers in ReasonML on Node.js and Express.js. Follow along to learn how to get the speed of Node, combined with the added type-safety of Reason.

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

Making an HTTP server in ReasonML on top of Node.js

Building native mobile applications has traditionally been a completely foreign work flow than web development. Recently frameworks, such as Ionic and React Native, have been come out to create a similar web development workflow in a native environment. 

Ionic 2 builds on top of Angular to offer a complete framework for building mobile apps using HTML, CSS, and Javascript that target native mobile and the browser. We’ll work with the RandomUser API to create an employee directory that will let us view user details, update that information, and pass the data back and forth with Ionic 2 routing.

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

Building apps with Ionic 2

Gesture driven lists are a great way to take a simple UI element and make it fun. We'll look at how we can make swipe-able list items to reveal additional functionality, as well as being able to drag and reorder list items.

Use Sliding Gestures to Reorder an Ionic 2 List

In this lesson we will walk through how to break out code into it's own provider using the CLI. Ionic’s CLI provides a generate command that will quickly help create common components, pipes, providers, and much more. To see what kind of generators are available, run `ionic g --list` in your terminal. 

Use the Ionic CLI to Generate Angular 2 Mobile Components

The simplest way to display data in an app is with a simple listview. This list will go over how items work and how to place certain elements in ion-items position slots.

Build your first page component with Ionic 2

Ionic offers a few different layouts, including a side menu-based one. We’ll setup a simple side menu layout from scratch and see how it behaves on different devices. For instance, if you're users are on an Android device, the side menu (and really, the whole app) will look and behave like a native Android app. As the user swipes from the side, the menu will overlay the main content. For iOS, the menu will not move, but the app's main content will instead. 

Create a Native Mobile Side Menu Layout in Ionic 2

Ionic’s NavController offers an extensive API that allows you to manipulate your apps history, create history from nothing, and programmatically navigate back. NavController has an extensive API with many methods and lifecycle hooks that developers can use. Be sure to check out the [documentation](http://ionicframework.com/docs/api/navigation/NavController/)

Use Ionic 2 NavController to Manipulate App History

A common UI pattern in mobile apps is to be able to “pull” down on a list and fetch more data, or scroll and load more. This kind of pattern is built into Ionic with the ionRefresher component and ionInfiniteScroll component.


[Infinite Scroll](http://ionicframework.com/docs/2.3.0/api/components/infinite-scroll/InfiniteScroll/) and [Refresher](http://ionicframework.com/docs/2.3.0/api/components/refresher/Refresher/) can be heavily customized as well. Both components allow you to change what is shown as the user begins to perform their action. This allows for a much more customized experience!

Lazy Load Data with Ionic 2

Ionic 2 has it’s own navigation system that that makes it straightforward to link components. We’ll look at how to take data from one template and pass it to another using Ionic NavController. 

Instead of thinking in terms of URLs and hrefs, NavController allows devs to think in terms of a component stack. To navigate forward to a new view, a developer pushes a new component on to the navigation stack. To go back, the component is popped from the stack. This push/pop metaphor is borrowed from traditional native development and allows for a more flexible navigation paradigm.  

Navigate Between Mobile Screens  with the Ionic 2 NavController

Ionic’s CSS and JS can detect what platform a user is on, and adjust to make sure you’re getting the correct interface. To preview this locally, you can use the CLI’s `--lab` flag to see what your app will look like before it’s even deployed to a device.


Preview an Angular 2 Mobile  App with Ionic Lab

Ionic provides a common API for displaying many overlay components, like Alerts, ActionSheet, Modals, and Popovers. We'll look at a few of the APIs and see how to interact with them. To learn more about these different APIs, be sure the view the documentation on them:

- [ModalController](http://ionicframework.com/docs/2.3.0/api/components/modal/ModalController/)
- [ViewController](http://ionicframework.com/docs/2.3.0/api/navigation/ViewController/)
- [AlertController](http://ionicframework.com/docs/2.3.0/api/components/alert/AlertController/)

Create an Overlay Component with the Ionic 2 Overlay API

Cards have become a common way to handle layout and display information in a easy-to-understand format. Ionic offers utility components that make creating cards straightforward. These components, like `ion-card`, `ion-card-content`, and `ion-card-header` are included in the framework to speed up the development process. There's no JavaScript behind these components, they're really just css driven. 

Create Angular 2 Mobile Card based layouts with Ionic 2

We’ll go over requirements needed to create a project and how to install the ionic CLI for project creation. Once it’s installed, we’ll start a project, specify an app name, and reuse a starter template for our project.


Start an Ionic 2 App with the CLI

A typical app will interact with some sort of remote API at some point. We’ll creating a simple provider class to fetch data from the Random User API and populate our apps UI with this data.

The `IonicModule` in this lesson provides some default Angular modules for convenience. As of Ionic 2.x.x, those modules include Angular's `BrowserModule`, `HttpModule`, `FormsModule`, and `ReactiveFormsModule`


Fetch data from an API using Angular 2 HTTP module 

ReasonReact allows React developers to leverage ReasonML's type system when creating components.

In this lesson, we take a quick spin around the ReasonReact project by creating a `<HelloWorld />` component. By the end of this lesson, you'll have learned how to create a React component using the `ReasonReact.statelessComponent` module while getting a first-hand look at some of the amazing tooling ReasonReact provides its users with!

* [ReasonML Homepage](https://reasonml.github.io/)
* [ReasonReact Homepage](https://reasonml.github.io/reason-react)

Render a Stateless Component within a ReasonML Application using ReasonReact

In this lesson we explore ReasonML's language basic datatypes like `integer`, `float`, `boolean`, `string`, `char`, `unit` and `list`. Further you will get familiar with the addition operator, several relational operators as well as structural equality.

Basic Datatypes and Operators in Reason

Let bindings allow to bind values to names similar to variable declaration in other languages. There are subtle differences tough in every language and we are going to explore the semantics of ReasonML's let bindings. Further we see how type inference works and it's implications. Last but not least we discover type alias.

Let bindings, Type Inference and Type Aliases in Reason

Reason has lexical scope. In this lesson we explore what this means for the visibility of bindings using local block scopes.

Scope in Reason

First we are going to investigate the if expression and compare it to JavaScript's if statement. If being an expression has multiple implications on how to use it. In the second part we are introducing the ReasonML's switch expression in it's simplest form using structural equality as well as the fall-through case.