Learn Elixir, Reflux and Webstorm

These videos include the introductory steps to writing your first Elixir function and beginning to understand some key concepts in Elixir that make it unique. 

Some of those concepts include:
- the Mix build tool
- project structure
- collections of functions written in modules
- function *arity*
- pattern matching and common uses for it
- the pipe operator

Elixir is a dynamic, functional language designed for building scalable and maintainable applications.

Elixir leverages the Erlang VM, known for running low-latency, distributed and fault-tolerant systems, while also being successfully used in web development and the embedded software domain.

elixir

Getting Started with Elixir

Bootstrap a new Elixir project using Mix (a build tool included when you install Elixir), with its built in project generation.

Additional resources:
- [Official introduction to Mix](https://elixir-lang.org/getting-started/mix-otp/introduction-to-mix.html#our-first-project)

Generate a new Elixir project using Mix

Elixir code is organized into groups of functions called modules. You can create your own modules and built on top of predefined modules that are a part of Elixir by default.

Additional resources: 
- [Getting started with Modules and function from Elixir docs](https://elixir-lang.org/getting-started/modules-and-functions.html)

Write a New Function Inside of an Elixir Module

The syntax to pass arguments into functions is akin to many other languages. Elixir functions are uniquely recognized when running based off of the number of arguments passed in (a term called *arity*). This means you can define functions with the same name, so long as a different number of arguments is passed in.

Arity is a key concept to be aware of when reading documentation and writing your own code.

Additional resources:
- [Information about arity](https://elixir-lang.org/getting-started/modules-and-functions.html#function-capturing)
- [Default arguments in functions](https://elixir-lang.org/getting-started/modules-and-functions.html#default-arguments)

Pass arguments into Elixir functions and understand arity

Elixir uses `=` as an operator, but rather than assigning values to variables with it, it *matches* values on the right hand side of the `=` with the left side. This can be used in simple values, more complex data structures, and powerful condition checking.

Put into simpler terms, pattern matching is Elixir's way of assigning variables.

Additional resources:
- [Elixir docs on pattern matching](https://elixir-lang.org/getting-started/pattern-matching.html)

Pattern match values in Elixir

Some common uses for pattern matching in Elixir include checking conditions and passing parameters into functions. It's useful for pulling out only specific variables from collections of data.

Additional resources:
- [Elixir docs on pattern matching](https://elixir-lang.org/getting-started/pattern-matching.html)

Pattern match in conditions and function parameters in Elixir

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

When exploring a new framework or technology, it is nice to have a seed project or sandbox so you can just get in and start playing. Let's build our React playground using npm, browserify, 6to5, and more within WebStorm!

Setting up a React Playground Dev Environment

Lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js.

webstorm

John Lindquist is a WebStorm wizard. In this lesson, he'll show you some of the tips & tricks he uses to squeeze maximum productivity out of his tool of choice. 

Tips & Tricks

You can easily share your code from WebStorm with others using the "Create Gist" feature. This lesson walks you through how to create a gist from a single or multiples files and also how to use gist.run to share a running version of your code

WebStorm - Sharing a Gist

Reflux uses Actions to tell the Stores when to update. We will wire Actions and Stores together to create a simple updatable age field React component.

Reflux - Creating Your First Action in React

WebStorm can save you tons of time by managing your imports for you. John walks you through a few key WebStorm importing tips to help speed up your importing workflow.

WebStorm - Managing Imports

A quick tutorial covering installing Karma and running tests from the command line and Webstorm.

Introduction to Karma

Reflux makes connecting to a store extremely simple. Let's refactor a React component so that the data now comes from a Reflux store and allows the data store to trigger future updates.

Connecting to a Reflux Store in React

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

In this lesson John shows some tricks for speeding up your test suite. He digs into some handy features of WebStorm, including the *ddescriber* plugin, as well as some alternative methods for Jasmine for selectively running your tests.

Speed Testing with WebStorm and Jasmine

Reflux actions don't need to be used within React components, you can trigger them from anywhere. John demonstrates this concept by extracting the actions away and then invoking them through jquery.

Reflux - Manually Triggering Actions

In this lesson, we'll walk through installing a custom color scheme into our [WebStorm](https://www.jetbrains.com/webstorm/) IDE. Dayle Rees's [daylerees/colour-schemes](https://github.com/daylerees/colour-schemes/blob/master/jetbrains/peacocks-in-space.icls) has a great collection of themes ready to install in different formats for various editors.

For this example, we will install the [Peacocks In Space](https://github.com/daylerees/colour-schemes/blob/master/jetbrains/peacocks-in-space.icls) theme into an OS X [WebStorm 11 EAP](https://confluence.jetbrains.com/display/WI/WebStorm+EAP) installation. _Note: This process will be very similar (or identical) for previous versions of WebStorm and other editors in the [JetBrain's family of editors](https://www.jetbrains.com/)._

WebStorm - Installing Custom Color Schemes (dayleress/colour-schemes)

WebStorm can easily help you set up a new Angular 2 project with never even touching a terminal. This lesson shows you all the neat GUI tricks you need to know to get up and running.

WebStorm - Setting Up Angular 2

Neither React nor Reflux come with a built-in library for loading data. Many people use jQuery, but this jQuery is heavy for the task. In this lesson, John shows you how to easily load in some data using Superagent and walks you through the process of displaying and formatting the data in your component.

Reflux - Loading data with Superagent

grunt

In this lesson you will install GruntJS and get up and running with your first task, initial configuration, and how to get Grunt methods auto-completing in WebStorm.

Introduction to Grunt

JetBrains IDEs have a very good code completion for JavaScript code but you can do it even better by adding TypeScript typings, even if you don’t use TypeScript in your project. Should work in WebStorm, PhpStorm, RubyMine, PyCharm and others.

Topics

Instructors

Content Type