Learn Ember, Openapi 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

Ember is a javascript framework that provides a rich set of tools for building modern web applications. Unlike many frameworks, Ember comes with opinions and a way of doing things so you aren't left with a ton of decisions to make about problems that have already been solved very well. Ember was designed from the start to deliver a productive and comfortable experience for you, the developer.

In this course you will learn what you need to know to get started building your own Ember we applications. From the absolute essentials like creating a new project with the Ember-CLI tools, templating, routing, and reusable components.



A JavaScript framework for creating ambitious web applications.

ember

Ember 2 Fundamentals

In this course, we will build a ToDo API that stores notes using the OpenAPI Specification (Swagger). We will start with a blank API definition using the Swagger Online Editor. The Swagger definition file will be used to create a Node.js API. Along the way, we will discover how to implement additional details required for a fully functional API requests and responses. We will also learn about the powerful capabilities of Swagger to generate server side code and client libraries.

Open API Initiative (OAI) is focused on creating, evolving and promoting a vendor neutral API Description Format based on the Swagger Specification

openapi

Build Node.js APIs with OpenAPI Spec (Swagger)

Creating forms is one of the simplest and most complicated things at the same time. A basic form consists of many different things happening, we have to retain the value, we have to keep watch of validation and we have to show error messages when something is invalid, this is on both the fields and on the entire form itself if we send a request off to the backend service.

So we're going to create a form using just the normal svelte features. Then we'll look into creating a form using the svelte forms lib. 

Create forms in Svelte with Svelte Forms Lib

Components in Ember are great for reusing code throughout our application. We’ll see how each instance of an Ember component has isolated state and we can over ride as well as set default values.

In this lesson, we will learn how to make a simple, reusable component within an Ember application.

Create Simple Components in Ember

In this lesson, we learn how to create nested routes and templates in an Ember.js application, in addition to how to create nested routes and isolated templates.

Creating nested routes in Ember.js

In this lesson, we will learn how templates work within Ember and how to use HTMLBars. This lesson will cover the connection between controllers and templates and how to use actions within templates as well.

Ember Templating with HTMLBars

In this lesson, we will learn how to install Ember Inspector and use it to see the state of our application and debug it.

The Ember Inspector can be installed from the [Chrome Web Store](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi). We will see how the inspector gives us access to information such as the routes available to us, the components used in a particular view, and data that is exposed to us etc.


Debug Ember Applications using Ember Inspector

Swagger is a project used to describe restful APIs using the OpenAPI Specification. It allows you to document your API so consumers understand the endpoints, parameters, and responses. In this lesson, I'll show you how to install the swagger command line tool, create a new API project using swagger, and introduce you to the swagger API editor.

Create an API with Swagger

In this lesson, you will learn how to define an HTTP GET endpoint using Swagger with URL parameters to identify the ID of the Todo item being requested.

Define an HTTP GET Endpoint with URL Parameters for a Node.js Server with Swagger

Schema definitions allow you to define the format and types of data sent and received by your API. This allows consumers of your API to be confident in using your API. In this lesson, you will learn how to create a schema definition for the Todo API server. 

Create An API Schema Definition Using Swagger

In this lesson, you will learn how to create an HTTP GET endpoint for a node.js server using Swagger. This endpoint will be used to return all of the Todo items from Elasticsearch to the client.

Define an HTTP GET Endpoint for a Node.js API Server with Swagger

This lesson shows you how to delete a Todo item from Elasticsearch using the Todo ID from the URL parameters according to the specifications defined in your Swagger API docs.

Create a Node.js function for an HTTP DELETE request for a Swagger API

This lesson demonstrates how to access the ID of a Todo item being deleted from the URL parameters when used with an HTTP DELETE method.



Define an HTTP DELETE Endpoint for a Node.js API Server with Swagger

In this lesson, you will learn how to define HTTP POST operations for your Todo API server using Swagger. Creating the endpoint, passing the todo in the request body, and parsing the todo are all demonstrated.

Define an HTTP POST Endpoint for a Node.js Server with Swagger

This lesson will teach you how to create the javascript functions defined by the Swagger specification to return all Todo items to the client when requested with an HTTP GET method.

Create a Node.js function for an HTTP GET request for a Swagger API

In this lesson, you will learn how to define multiple parameters in the API specification to identify the ID of the Todo item being updated in the URL, as well as the contents for the updated Todo item in the body of the request.

Define an HTTP PUT Endpoint for a Node.js API Server with Swagger

APIs created with Swagger have a built-in mock function, allowing you to mock responses from your API prior to writing the backend code to make it functional. In addition to learning how to enable this feature, I will show you how to write your own functions to enhance the mock responses returned when using the Swagger mock feature.

Mock API Responses with Swagger

There are a lot of great monitoring tools available for Node.js. It is also incredibly easy to build monitoring into your application. In this lesson, we will add precision monitoring to the function calls in the Todo API server, log it to the console, and persist those results to Elasticsearch where they can later be reviewed, graphed, and analyzed.

Build Monitoring into your API Server

This lesson shows you how to create the functions defined in the Todo API specification to create new Todo items when received in HTTP POST methods. You will also see the errors you will get when CORS is not properly configured and how to resolve them by installing the NPM CORS package.

Create a Node.js function for an HTTP POST request for a Swagger API

This lesson will teach you how to update a Todo item in Elasticsearch when received from an HTTP PUT method in your API server built with Swagger.