ForwardJS 2017 - Fullstack end-to-end Test Automation with node.js
Fullstack workshop
-
Upload
assaf-gannon -
Category
Software
-
view
129 -
download
0
description
Transcript of 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