Fullstack workshop

Fullstack

Developers Israelבישראל Fullstackמפתחיקהילת

!מרוציםלקוחותומאותעובדים100מעל ,שנה15

?אנחנומי ,טיקל

משימותעםפיתוחלצוותיעוזריםאנחנו

.טכנולוגיהבאמצעותלהצליחמאתגרות

שאוהביםפתוחקודמפתחיחברת●

.חדשותוטכנולוגיותאתגרים

חשיבהעםצוותיםומחזקיםמקימים●

ללקוחותשעוזריםויצירתיתייחודית

תוכנהולהפיץלפתח ,לתכנןשלנו

.איכותית

עםFullstackמפתחיקבוצות●

,Java, Javascript :מומחיות

DevOps, Ruby and Mobile.

Let’s Create a Fullstack

Javascript Application

Assaf Gannon

13.11.2014

Google CampusHosted by:

The Goals of this Workshoptext

● Getting familiar with Javascript as an end-2-end

technology

● Setting up a stable and ‘production ready’

development environment

● Get a taste of some of the most popular development

tools

● Learn a bit about service-oriented architectural

concepts

● Have fun :)

Why Javascript?text

Pros:

● Single Language makes for easy context switching

● Encourages Fullstack teams

● Extremely easy to refactor - extremely lean

● Simplifies concurrency issues

● Great dependency management (NPM, Bower)

Cons:

● Requires strict conventions

● No compiler -> excessive tests required (?)

● Extra attention to thread bottlenecks (?)

Let’s Get Started!

text

About this workshoptext

I will explain a tool / concept / requirement

You will have a few minutes to give it a shot

I will demonstrate the result code

You will use git checkout stepX -f to reset your project

to the result

If you want to keep your own code, just commit it to a

different branch before checking out the ‘step’ branch

(if you don’t get it - ask me :) )

Workstation Setup

Vagrant + VirtualBox

Our unified development environment

text

Install Vagrant + VirtualBox

$ vagrant box add chef/ubuntu-14.04

Environment Configurationtext

1. Get a VirtualBox Image via Vagrant:

$ vagrant box add chef/ubuntu-14.04

2. Clone the workshop repository:$git clone https://github.com/tikalk/fullstack-workshop.git

3. cd into fullstack-workshop/vagrant

4. run:

vagrant up

While the machine is

booting..

text

Development Stacktext

1. Git

2. NodeJS

3. NPM

4. Ruby

5. On linux just run:

sudo apt-get update -y

sudo apt-get install git-core nodejs ruby npm -y

Linux 14 requires: sudo ln -s "$(which nodejs)" /usr/bin/node

Shared Directory

When developing with vagrant we store the files in a

shared directory so we can edit them with our favorite

text editor on the ‘Host’ machine and see the result in

the Virtual machine.

This is configured in the Vagrant file.

For this workshop the shared folder is the project’s root

folder

text

Enter Yeoman

Yeoman

Yeoman is great for scaffolding projects and generating

stuff.

Check out the rich (over 1100) generators library @

http://yeoman.io/generators/

We will use:

angular-fullstack

text

Install angular-fullstack generator

on the virtual machine and

generate a project in the root dir

The Project Treetext

Enter Grunt

Grunt

Grunt is a Nodejs task runner

Check out the rich (over 3600) plugins library @

http://gruntjs.com/plugins

text

Running the project with Grunt

1. sudo chown -R `whoami` /home/vagrant

2. npm install

3. bower install

4. [sudo] npm install grunt-cli -g

5. grunt --help

6. grunt serve

text

Cleaning the Boilerplate

1. Get familiar with the project’s code

2. Clean all the non-required ‘boilerplate’ code

text

$ git checkout step1 -f

Add Some Infrastructure

1. Add a socket library (Socket.io)

2. Add a logging library (Winston)

3. Add a configuration library (nconf/config) - optional

text

$ git checkout step2 -f

Starting to Code :)

1. Start of with a basic vertical - Search

2. Add the client code in ./client

3. Generate UI View, Service & Controller

tip: use ‘yo’ to generate the service & controller

4. view: Search form + results area

5. Service: fetches the data

6. Controller: glue to connect the data and view

text

$ git checkout step3 -f

A few words about AngularJS

1. Module

2. Service

3. Controller

4. View

text

Angular View (main.html)text

Angular Module (app.js)text

Angular Controller (app.js)text

Angular Service

(search.service.js)text

Media API (Remote control)

1. Create a socket api to receive socket events from the

client

2. Add the event actions to the Search controller

text

$ git checkout step4 -f

Creating the player (slave)

1. Create a new route in the client for the player

2. Integrate the Youtube player (search google for the

IFrame client)

3. Add listener to socket events and delegate to the

player

text

What we should have text

Whats Next ...

1. Add DB integration (MongoDB, Redis)

2. Add Authentication & Authorization

3. Add Tests and experience TDD

4. Integration with other services with Message Bus

5. Deployment in Production

text

Are You a NINJA?We are hiring!

assaf@tikalk.com

text

THANK YOU

Assaf Gannon

Email:

assaf@tikalk.com