Installation

$ npm install -g create-react-native-app

$ npm i -g create-react-native-app
$ create-react-native-app my-project
$ cd my-project
$ npm start

Basic App

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#4286f4',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Create React Native App

Pros

• JavaScript − You can use the existing JavaScript knowledge to build native mobile apps.
• Community − The community around React and React Native is large, and you will be able to find any answer you need.
• Code sharing − You can share most of your code on different platforms.

Cons

• Native Components − If you want to create a native functionality which is not created yet, you will need to write some platform specific code.

Reference

npm install --global gulp-cli

npm install --save-dev gulp

Create a gulpfile

var gulp = require('gulp');
gulp.task('task-name', function() {
  // place code for your default task here
});

gulp

gulp.task('task-name', function () {
  return gulp.src('source-files') // Get source files with gulp.src
  .pipe(aGulpPlugin()) // Sends it through a gulp plugin
  .pipe(gulp.dest('destination')) // Outputs the file in the destination folder
})

$ npm install gulp-sass --save-dev

var sass = require('gulp-sass');
/**
 * Compile Sass.
 */
gulp.task('sass', function() {
    return gulp.src('./sass/*.scss') // Create a stream in the directory where our Sass files are located.
    .pipe(sass())                    // Compile Sass into style.css.
    .pipe(gulp.dest('./'));          // Write style.css to the project's root directory.
});

gulp sass

/**
 * Watch the Sass directory for changes.
 */
gulp.task('watch', function() {
  gulp.watch('./sass/*.scss', ['sass']);  // If a file changes, re-run 'sass'
});

gulp watch

Reference

• https://teamtreehouse.com/library/gulp-basics
• https://gulpjs.com/

Prerequisites

Installation

npm install -g @angular/cli

ng new my-app

cd my-app
ng serve --open

And that’s it!

What’s New In Angular 4

Router ParamMap

class MyComponent {
 sessionId: Observable<string>;
 constructor(private route: ActivatedRoute) {}
 ngOnInit() {
   this.sessionId = this.route
     .queryParams
     .map(params => params['session_id'] || 'None');
 }
}

class MyComponent {
 sessionId: Observable<string>;
 constructor(private route: ActivatedRoute) {}
 ngOnInit() {
   this.sessionId = this.route
     .queryParamMap
     .map(paramMap => paramMap.get('session_id') || 'None');
 }
}

Animation Package

Improved *ngIf and *ngFor

<div *ngIf="races.length > 0; else empty"><h2>Races</h2></div>
<ng-template #empty><h2>No races.</h2></ng-template>

<div *ngFor="let pony of ponies | slice:0:2 as total; index as i">
  {{i+1}}/{{total.length}}: {{pony.name}}
</div>

TypeScript 2.1 & 2.2 compatibility

Universal

Conclusion

References

<div id="example">
  <button v-on:click="clickme">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({
  el: '#example',
  data: {
    counter: 0
  },
  methods : {
    clickMe : function(){
     this.counter += 1;
    }
  }
})

<div id="example2">
  <button v-on:click="countUp">Count Up</button>
  <button v-on:click="countDown">Count Down</button>
  <h1>Count: {{ counter }}</h1>
</div>

var example2 = new Vue({
  el: '#example2',
  data: {
    counter: 0
  },
  methods : {
   countUp : function(){
    this.counter += 1;
   },
   countDown : function(){
    this.counter -= 1;
   }
  }
})

Instead of using "v-on:click", we have a shortcut. We can use "@click".

<div id="example2">
  <button @click="countUp">Count Up</button>
  <button @click="countDown">Count Down</button>
  <h1>Count: {{ counter }}</h1>
</div>

<div id="example">
  Visit : <a href="#">{{cleanUrl}}</a><br><br>
  <input type="text" v-model="url" placeholder="Type your Url">
  <button @click="humanizeUrl">humanizeUrl</button>
</div>

var example1 = new Vue({
  el: '#example',
  data: {
    url: "",
    cleanUrl: ""
  },
  methods : {
    humanizeUrl: function(){
      this.cleanUrl = this.url.replace(/^https?:\/\//, '').replace(/\/$/, '')
    }
  }
})

<div id="example">
  Visit : <a v-bind:href="url">{{cleanUrl}}</a><br><br>
  <input type="text" v-model="url" placeholder="Type your Url">
  <button @click="humanizeUrl">humanizeUrl</button>
</div>

Reference

<div id="app">
  <span>The message is: {{message}}</span>
</div>

new Vue({
 el: '#app',
 data: {
   message: 'vue js one way binding'
 }
});

<div id="app">
  <span>{{message}}</span><br>
  <input v-model="message">
</div>

new Vue({
  el: '#app',
  data: {
    message: 'vue js two way binding'
  }
});

Directive

Two way binding with JQuery

Reference

Friendly error messages

import Html exposing(..)
view orders =
  div [] (List.mapp viewOrder orders)
viewOrder order =
  span [] (text order.name)

--NAMING ERROR-----------------------------------------------------list-mapp.elm
Cannot find variable 'List.mapp' .
6| div [] (List.mapp viewOrder orders)
List does not expose 'mapp' . May be you want one of the following?
List.map
List.any
List.map2
List.map3

• shows the line number in the code which caused the error
• shows the actual line of code
• lists the maximum possibilities for correct code

• React
• Redux
• npm/yarn
• Webpack
• Immutable.JS

Start with Elm

Architecture

Install on Rails

rails new elm-on-rails --webpack=elm

./bin/rails webpacker:install:elm

#hello_elm.js
import Elm from './Main'
document.addEventListener('DOMContentLoaded', () => {
const target = document.createElement('div')
document.body.appendChild(target)
Elm.Main.embed(target)
})

<%= javascript_pack_tag "hello_elm" %>

#config/routes.rb
get '/', to: 'application#index'

bundle exec rails webpacker:compile

Immutable Data and Pure Functions

user.update(params)

new_hash = hash.merge(params)

newUser = update params user

Elm Platform

• elm-repl

• elm-reactor

elm-reactor -a 0.0.0.0 -p 3000

• elm-make

• elm-package

elm-package install <package-name>

References

• https://github.com/rails/webpacker
• https://guide.elm-lang.org/
• https://www.elm-tutorial.org/en/
• https://github.com/fbonetti/elm-rails

What is Vue.js?

Overview

– index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="shortcut icon" type="image/png" href="/assets/images/favicon.png"/>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

– src/router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Hello from '@/components/Hello';
Vue.use(VueRouter);
const routes = [
  { path: '/', name: 'Hello', component: Hello },
];
/* eslint-disable no-new */
export default new VueRouter({
  routes,
  mode: 'history',
});

– src/App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script>
export default {};
</script>

– src/main.js

import Vue from 'vue';
import router from '@/router';
import store from '@/store';
import App from '@/App';
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),
});

– src/components/Hello.vue

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  data() {
    return {};
  },
  computed: mapState({
    message: state => state.Hello.message,
  }),
};
</script>

Getting Started

<script src="https://unpkg.com/vue"></script>

function printText () {
  return 'Hello World!'
}
// Set some text in jQuery
$('.element').text(printText())

<div class="app">
  <span class=".element">
    {{ msg }}
  </span>
</div>

new Vue({
  el: '.app',
  data: {
    msg: 'Hello World!'
  }
})

Why Vue.js?

Advantages

1. Simplicity

<div id="app">
  {{ message }}
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});
</script>

2. Reactivity

var app = new Vue({
  el: '#app',
  data: {
    message: "<h1>Hello World</h1>"
  }
});
setTimeout(function() {
  app.message = "<small>Goodbye World</small>";
}, 2000)

<div id="app">
  <!--Renders as "Hello World" with <h1> tag-->
  <!--Then after 2 seconds re-renders as "Goodbye World" with <small> tag-->
  <p v-html="message">{{ message }}<p>
</div>

3. Focus

4. Flexibility

• Write your template in an HTML file
• Write your template in a string in a Javascript file
• Use JSX in a Javascript file
• Make your template in pure Javascript using virtual nodes

5. Components

<div id="example">
  <my-component></my-component>
</div>

// register
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// create a root instance
new Vue({
  el: '#example'
})

<div id="example">
  <div>A custom component!</div>
</div>

 6. Copying competitors

Conclusion

References

group :development, :test do
  gem "jasmine"
end

bundle install

rails generate jasmine:install

Run tests

1. In your browser
2. Continuous Integration Mode (CI)

Browser Mode

rake jasmine

http://localhost:8888/

rails generate jasmine:examples

Configurable Settings

Raise Exceptions

Stop Spec on Expectation Failure

Run Tests in Random Order

Continous Integration Mode

rake jasmine:ci

Jasmine.configure do |config|
   config.ci_port = 1234
end

Configuration

• jasmine.yml
• jasmine_helper.rb

Sample configuration:

# spec/javascripts/support/jasmine.yml
random: true
show_console_log: false
stop_spec_on_expectation_failure: true

# spec/javascripts/support/jasmine_helper.rb
Jasmine.configure do |config|
  config.random = false
  config.show_console_log = false
  config.stop_spec_on_expectation_failure: false
  config.show_full_stack_trace = false
  config.prevent_phantom_js_auto_install = false
end

Testing

Testing JavaScript

Plugins worth considering

• Jasmine-Jquery – this plugin provides a lot of jquery related matchers. Download it here
• Jasmine-Matchers – a tool to provide additional matchers. Download it here
• Jasmine-Fixture – a plugin that provides DOM creation using CSS selectors, therefore you can interact with the DOM much easier. Download it here

Write Beautiful Unit tests

Importance of Test Discipline

• Writing tests first gives you a clearer perspective on the ideal API design.
• Does the developer understand the problem enough to articulate in code all critical component requirements?
• Manual QA is error-prone. In my experience, it’s impossible for a developer to remember all features that need testing after making a change to refactor, add new features, or remove features.
• Continous Integration prevents failed builds from getting deployed to production.

Bug Report vs plain Unit Test

• What are you trying to test?
• What should it do?
• What is the real-time output (actual behavior)?
• What is the expected output (expected behavior)?

describe("CalculatorAddMethod", function() {
  var calculator = new Calculator();
  it("should return number", function() {
    const actual = typeof Calculator.add(5,10);
    const expected = 'number'
    expect(actual).toEqual(expected);
  });
});

• What are you trying to test?
  • -> Go for the test description. It is testing for the return type of the add method of Calculator().
• What should it do?
  • -> Again, look at the test description. It clearly says that it is testing for the return type of add method.
• What is the actual output?
  • -> There is a dedicated variable which holds the actual result and how you got the actual result. TWO FOR ONE!
• What is the expected output?
  • -> Again, there is a dedicated variable which holds the actual result. Straight as a ruler!

Make your tests even better

Easter Egg

Conclusion

• What are you trying to test?
• What should it do?
• What is the real-time output (actual behavior)?
• What is the expected output (expected behavior)?
• How can be the test reproduced?

Screenshots with PhantomJS

gem install phantomjs

var instance = require('webpage').create();

instance.open('http://redpanthers.co/', function() {
instance.render('screenshot-phantom.png');
phantom.exit();
});

phantomjs filename.js

Screencap gem

gem install phantomjs -v 1.9.8

phantomjs --version

gem 'screencap'

gem install screencap

Usage

require 'screencap'
screenshot = Screencap::Fetcher.new(<url>)
image = screenshot.fetch

• Fetcher class accepts url of the website to take screenshot.
• Screenshot is taken when fetch method is called.
• Also, fetch method supports various optional parameters to specify the area to capture the screenshot.
• We can specify where to store the screenshot captured, as shown below.

image = obj.fetch(
 output: '~/folder/file-name.png',
 # dimensions for taking screenshot of specific area
  width: 1024,
 height: 768
 )

Example

require 'screencap'
screenshot = Screencap::Fetcher.new('http://redpanthers.co/')
image = screenshot.fetch(output: '~/screencap/screencap.png',
                                   width: 300,
                                  height: 500)

Webshot gem

gem 'webshot'

gem install webshot

Usage

require 'webshot'
screenshot = Webshot::Screenshot.instance
screenshot.capture "https://github.com/", "image.png", width: 1024, height: 800

References

• PhantomJS
• Screencap gem
• Webshot gem

1. Action
2. Dispatcher
3. Store

Component

import React from 'react';
import checkoutActions from "../actions/checkout-action";
import checkoutStore from "../store/checkout-store";
class CartElements extends React.Component{
  constructor(){
    super()
    this.state = {
      currentCart : checkoutStore.getCart()
    }
  }
  componentDidMount(){
    checkoutStore.addListener(this.updateCartNumber)
  };
  updateCartNumber = () => {
    this.setState({
      currentCart: checkoutStore.getCart()
    })
  };
  updateCart = () => {
    checkoutActions.addCart(parseInt(this.refs.cartNumber.value))
  };
  gotoCheckout = () => {
    window.location.href +="?products=[1,2,3]"
  };
  render(){
    var checkoutButton = "";
    if(this.state.currentCart > 0){
      checkoutButton = <a className="button" href="/welcome/checkout?products=[1,2,3,4]">CheckOut</a>;
    }
    return(
      <div>
        <div className="input-group">
            <input type="number" ref="cartNumber"/>
        </div>
        <button className="button success" onClick={this.updateCart}>Add to Cart</button>
        {checkoutButton}
      </div>
    )
  }
}
export default CartElements

Action File

import dispatcher from "../dispatcher";
import constants from "../const/store-const";
var checkoutActions  = {
  addCart: function(data){
    dispatcher.dispatch({
      actionType: constants.ADD_CART,
      data: data
    })
  }
}
export default checkoutActions;

1. emitChange
2. addListener
3. removeListener

import dispatcher from '../dispatcher.js';
import EventEmitter from 'events';
import assign from 'object-assign';
var CHANGE_EVENT = 'change';
var EventEmitterEvent  = EventEmitter.EventEmitter
var _number  = 0;
var checkoutStore = assign({}, EventEmitterEvent.prototype, {
  addCart: function(number){
    return _number = _number + number;
  },
  getCart: function(){
    return _number;
  },
  emitChange: function(){
    this.emit(CHANGE_EVENT)
  },
  addListener: function(callback){
    this.on(CHANGE_EVENT, callback)
  },
  removeListner: function(callback){
    this.removeListner(CHANGE_EVENT, callback)
  }
});
dispatcher.register((action)=>{
  switch (action.actionType){
    case 'ADD_CART':
      console.log("hello")
      checkoutStore.addCart(action.data)
      checkoutStore.emitChange()
      break;
  }
})
export default checkoutStore;

class CartIconOnTopBar extends React.Component{
  constructor(){
    super()
    this.state = {
      cartItemCount: checkoutStore.getCart()
    }
  }
  componentDidMount(){
   checkoutStore.addListener(this.updateCart)
  };
  updateCart = () => {
    this.setState({
      cartItemCount: checkoutStore.getCart()
    })
  };
  openClassModal = () => {
  };
  render(){
    return(
        <li>
          <a href="#" onClick={this.openCartModal} className="cart-element">
            <i className="fi-shopping-cart"></i>
            <span className="cart-count"> {this.state.cartItemCount} </span>
          </a>
        </li>
    )
  }
}