DevGeekWeek 2017

| מלון דניאל, הרצליה 2017ביוני 18-22

רישום וארוחת בוקר 09:00 – 08:00

הרצאות סמינרים 09:00– 10:30

הפסקה 10:45 – 10:30

הרצאות סמינרים 10:45– 12:30

ארוחת צהריים 13:30 – 12:30

הרצאות סמינרים 13:30– 15:00

הפסקה מתוקה 15:15 – 15:00

הרצאות סמינרים 15:15– 16:30

לפרטים והרשמה צרו קשר:lhermelin@jbh.co.il | 03-7100791 - לידיה

www.jbh.co.il | !תהיו חברים

שפות התכנות וכלי הפיתוח מתחדשים ומתעדכנים בקצב חסר תקדים ושולטים בכל תעשייה אשר נדרשת להתחרות בעולם המודרני והמקושר. התעדכנות טכנולוגית שוטפת תבטיח בחירה נכונה של כלים ושירותים אשר יובילו לפיתוח קוד מהיר, יעיל ואיכותי, תוך שמירה על גמישות והתאמה לחידושים טכנולוגיים עתידיים.

ג'ון ברייס הדרכה מציעה מגוון עצום של קורסים מבוקשים וייחודיים לקהל הרחב ולקהל המקצוענים.

זמן לפתח >זמן להתפתח... <

קורסי הפיתוח של ג'ון ברייס הדרכה

Java Programming Extreme JavaReal-time web applications with Node.js and Express.jsFront End Development with HTML5, CSS3 & jQueryBuilding Web Applications using AngularJSProgramming Embedded LinuxDeveloping Web/Mobile Applications using ASP.NET MVC 4/5 and jQueryLinux InternalsPython 2 ProgrammingDeveloping Android applicationsAngular 2.0Java Script Full Stack ExpertsProgramming the .NET Framework 4.0/4.5 with C# 5.0

69474359337642584335791100137359134083251050 3377457970240

שם הקורסמק”ט

לפרטים נוספים ושליחת קו"ח פנו אל:Talent Recuitment Manager ,מאיה הוף

054-4601413 | 03-7100625mayaho@johnbryce.co.il

אנחנו מרחיבים את סגל המרצים שלנוונשמח לקלוט אותך לשורותינו

אפשרויות תעסוקה מגוונות | משרה גמישה בוקר/ערב | אפשרות לעבודה כפרילאנס

Big Data Cyber DevOps

בואו לגדול איתנויש לנו נבחרת מרצים מנצחת!

ולהעביר הלאה את הידע המקצועי שלכם!

ג’ון ברייס מחפשת את הטאלנט הבא

AWS Cloud Dev Full StackBig Data Cyber AndroidDevOps

למגוון המשרות חפשו בגוגל "מרצים בג'ון ברייס"

Jscript Hotspots Angular, React, Node.js & more

כץויריבשיבקיאיר

Agenda

• Introduction– Single Page Application– Web Development Trends– Modern Web App Architecture– Tools & Frameworks Overview– npm – your start point.

• Deep Dive into selected JavaScript Frameworks– webpack, gulp, system.js, Require.js, , AngularJS– Angular – React– Node.js

1

Single Page Applications (SPA)

• The evolution of web technologies• Round Trips to the server and User Experience UX• Using XHR / Ajax to solve local slow pages.• Where is my code? • Maintenance Maintenance Maintenance .• What is Single Page Application (SPA)

The need for a javascript framework

• Javascript is the language• What is your design pattern?• Are you going to use MVC MVVM or MVA?• Maintenance Maintenance Maintenance !!!• The need for a framework• The quality of the Open Source code• Who stand behind that open source code?• Implementing best practices.• Suppuration of concerns

2

The need for a javascript framework - what do we need?

• DOM Manipulation• Routing• Templates & Data Binding• Ajax• History, Caching, Forms, Validations ...• Performance• Responsiveness and Mobile Orientation• Modularity• e2e testing integration• Low maintenance• Large community

Web Development Trends

• https://trends.google.com/trends/• Lets check:

– asp, php, jquery, angular, react, node.js– Lodash, request, async, express….

3

npm – start here.• Getting Started

– 01 - What is npm?– 02 - Installing Node.js and updating npm– 03 - Fixing npm permissions– 04 - Installing npm packages locally– 05 - Using a `package.json`– 06 - Updating local packages– 07 - Uninstalling local packages– 08 - Installing npm packages globally– 09 - Updating global packages– 10 - Uninstalling global packages– 11 - Creating Node.js modules– 12 - Publishing npm packages– 13 - Semantic versioning and npm– 14 - Working with scoped packages– 15 - Using tags

• npm rank– https://gist.github.com/anvaka/8e8fa57c7ee1350e3491

DEMO

• Exploring few of the most popular packages.

4

Angular

Yair Shivekyair@shivek.co.il

AgendaModule 1 - Introduction to Angular

• Single Page Applications (SPA)• The need for javascript framework• AngularJS vs. Angular 2 vs. Angular 4• Angular vs. React• Setting up the environment• “Hello Angular 2” - your first app.

Module 2 - Type Script• Angular is built on Type Script• JavaScript, ECMAScript5 , ECMAScript 6 and Type Script• Types• Classess• Inheritance• Generics Modules• Raytracer• Tools

5

Agenda

Module 3 - Angular behind the hood• Angular architecture• How angular works• The application• The model• The components• The component decorator• Putting it all together

Introduction to Angular

• Single Page Applications (SPA)• The need for a javascript framework• Setting up the environment• “Hello Angular ” - your first app.

6

AngularJS vs. Angular 2 vs. React

• Many libraries and frameworks out there.• Let “Google Trends” tell the story• Check usability at npm and github• What are the major difference between the three

leaders

Angular - Setting up the environment

• Install Node Package Management (npm)– https://nodejs.org/en/

7

“Hello Angular 2” - your first app.

DEMO

Typescript● Angular is built on Type Script● JavaScript, ECMAScript5 , ECMAScript 6 and Type Script● Types● Classess● Interfaces● Inheritance● Generics Modules● Raytracer● Tools

8

Angular 2 is built on Type Script

• Classes• Modules• Decoratos

JavaScript, ECMAScript5 , ECMAScript 6 and Type Script●How typescript helps us with the current

ECMAScript5 standart ●What about tomorrow's ECMAScript6 ?●What about 7 & 8 & next …?●Check the typescript playground

○ https://www.typescriptlang.org/play/index.html

9

Typescript classes

class Greeter {greeting: string;constructor(message: string) {

this.greeting = message;}greet() {

return "Hello, " + this.greeting;}

}

let greeter = new Greeter("world");

Typescript Interfaces

interface Person {firstName: string;lastName: string;

}

function greeter(person: Person) {return "Hello, " + person.firstName + " " + person.lastName;

}

var user = { firstName: "Jane", lastName: "User" };

10

Typescript inheritanceclass Animal {

constructor(public name: string) { }move(distanceInMeters: number = 0) {

console.log(`${this.name} moved ${distanceInMeters}m.`);}

}

class Snake extends Animal {constructor(name: string) { super(name); }move(distanceInMeters = 5) {

console.log("Slithering...");super.move(distanceInMeters);

}}class Horse extends Animal {

constructor(name: string) { super(name); }move(distanceInMeters = 45) {

console.log("Galloping...");super.move(distanceInMeters);

}}

let sam = new Snake("Sammy the Python");let tom: Animal = new Horse("Tommy the Palomino");

sam.move();tom.move(34);

Typescript Generics Modules

class Greeter<T> {greeting: T;constructor(message: T) {

this.greeting = message;}greet() {

return this.greeting;}

}

let greeter = new Greeter<string>("Hello, world");

11

Typescript Decorators

• Decorators are an experimental feature that may change in future releases.• To enable experimental support for decorators

– tsc --target ES5 --experimentalDecorators– Or edit tsconfig.json

angular-cli will set it for you

{"compilerOptions": {

"target": "ES5","experimentalDecorators": true

}}

Typescript Tools

https://www.typescriptlang.org/docs/handbook/integrating-with-build-tools.html

12

Angular behind the hood

• Angular architecture• How angular works• The application• The model• The components• The component decorator• Putting it all together

Angular architecture

13

How angular works

• Angular application is made up of Components• Components is a way to teach the browser new

tags.• Demo...

The Angular Application

• An Angular Application is a tree of Components• At the root of that tree, the top level Component is the application

itself. • The browser will render the top level Component when booting

(bootstrapping) the app.• You can composite a large Components from from smaller ones.• When a Component is rendered

– it recursively renders its children Components

14

Angular 2 Model

• Angular supports many different kinds of models (and data architectures).– AJAX HTTP Requests– Websockets– Indexdb– LocalStorage– Service Workers– Etc….

• MVC, MVVM, MVW• FLUX• Observables

Angular Model - Observables

• Observables– Observables give us streams of data. – We subscribe to the streams and then perform

operations to react to changes. – RxJs is the most popular reactive streams library for

Data Architecture in Angular 2

15

Angular Components

• DEMO

Component Decorator

• DEMO

16

Demo

• Building your first Angular Application– Application– Components– Models– Services

Angular CLI commands

17

ng serve -- prod

18

node.js

yair@shivek.co.il

introduction - node.js never sleep

node.jsconsole.log("shalom");setTimeout(function(){

console.log("olam");}, 2000);

phpecho("shalom");sleep (2000);echo("olam");

No mutax, No possibility to halt an execution., OS un-schedule the work. CPU use goes to “0” and then schedule again after 2 sec.just idle, Node is good in Ideling

19

demo

var http = require("http");var s = http.createServer(function(req,res){

res.writeHead(200, {'content-type':'text/plain'});res.end("shalom olam\n");

});s.listen(8000);

Connection →keep-alive

Date →Sun, 15 Nov 2015 14:18:14 GMT

Transfer-Encoding → chunked

content-type → text/plain

HTTP 1.1 - Chunked transfer encoding

Chunked transfer encoding is a data transfer mechanism in version 1.1 of the Hypertext Transfer Protocol (HTTP) in which data is sent in a series of "chunks". It uses the Transfer-Encoding HTTP header in place of the Content-Length header, which the earlier version of the protocol would otherwise require.[1] Because the Content-Length header is not used, the sender does not need to know the length of the content before it starts transmitting a response to the receiver. Senders can begin transmitting dynamically-generated content before knowing the total size of that content.

20

Concurrency Benchmark (1 of 2)

C:\Users\yair>ab -n 100 -c 100 http://localhost:8000/This is ApacheBench, Version 2.3 <$Revision: 1706008 $>Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/Licensed to The Apache Software Foundation, http://www.apache.org/Benchmarking localhost (be patient).....doneServer Software:Server Hostname: localhostServer Port: 8000Document Path: /Document Length: 12 bytesConcurrency Level: 100Time taken for tests: 2.040 secondsComplete requests: 100Failed requests: 0Total transferred: 11300 bytesHTML transferred: 1200 bytesRequests per second: 49.02 [#/sec] (mean)Time per request: 2040.117 [ms] (mean)

Concurrency Benchmark (2 of 2)Time per request: 20.401 [ms] (mean, across all concurrent requests)Transfer rate: 5.41 [Kbytes/sec] receivedConnection Times (ms)

min mean[+/-sd] median maxConnect: 0 0 0.4 0 2Processing: 2005 2012 3.3 2013 2018Waiting: 10 17 4.5 16 26Total: 2005 2012 3.3 2013 2018Percentage of the requests served within a certain time (ms)50% 201366% 201375% 201480% 201490% 201595% 201798% 201899% 2018100% 2018 (longest request)

21

The V8 JavaScript Engine

watch the video

https://www.youtube.com/watch?v=hWhMKalEicY

npm - packages

• packages people ‘npm install’ a lot• most dependent-upon packages

22

node.js presentation

http://www.tutorialspoint.com/nodejs/nodejs_tutorial.pdf

23

React JSMy First React.js Application

BY: Yariv Katz

LinkedIn: https://www.linkedin.com/pub/yariv-katz/23/aa0/38a

email: yariv@nerdeez.com

Who am I?

● Full stack developer● CTO LTG● CTO & Founder fisbo● IDF Consultant● Founder of Nerdeez - Software Solutions, Lecturing &

Consulting

24

What we will cover● About React - Some info basic tools & Concepts

○ React Virtual DOM○ ES2015 (ES6)○ Babel & JSX

● “Hello World” demo● React Component

○ Properties○ Events○ State

● Redux○ Unidirectional Data Flow○ State Machine○ Actions/Action Creators○ Asynchronous Actions○ Reducers○ Store○ Component○ Provider○ Connecting everything together - final example

About React.js

● React is an open source library maintained by Facebook

● Designed to be the View in an MVC application

● Together with Application Architecture Design like Flux or

Redux becomes a powerful tool for creating complex web

applications

● React has a very small footprint (147KB)

● Changing the DOM is faster than any library today.

25

Companies that use React in production

React Virtual DOM

● Writing directly to the DOM is expensive

● Writing to JS Objects is much faster

● React Virtual DOM is a Javascript Object

● React reads only from the Virtual DOM

● React writes to the Virtual DOM and the Virtual DOM is in charge of

updating just the changes in the DOM (minimal updates to the DOM Tree)

26

React Virtual DOM

DOM rendering in other Frameworks DOM rendering with React

JS Code

DOM

Read Write

React Code

React Virtual DOM

DOM

Write Changes

Read Write

ES2015 (ES6)● ES - stands for ECMASCRIPT

● ECMASCRIPT - is a scripting language specification

● ES2015 - is the new version of ECMAScript standard and has been adopted

by JavaScript - We will use ES2015 for our React Development

● New Desktop browsers’ Javascript Engines now support most of ES2015

new features - (Mobile not so much)

Chrome 51 Firefox 49 IE Edge 14

98% 93% 90%

● To keep support for older browsers we use ‘transpilers’ like Babel

27

Babel & JSX● It’s very common and recommended to develop React apps using ES2015

and JSX● JSX - stands for JavaScript as XML and allows us to add HTML like syntax

in our JS files● We will be using Babel to transform our JSX and ES2015 to supported

JavaScript Code● Another common tool recommended for React Development is webpack● Webpack takes all our project files and outputs a single minified project file● Webpack can also integrate Babel and JSX

Babel & JSXJS code without JSX JS Code with JSX

JS Code with Babel & JSX

React.createClass({render: function(){

return React.createElement('div', null, 'Hello DevGeekWeek!'

) }

});

React.createClass({render: function() {return (

<div>Hello DevGeekWeek!

</div>);

}});

class HelloDevGeekWeek extends React.Component{render() {

return (<div>Hello DevGeekWeek!</div>);}

};

28

Our first React component

• To Define a React component we simply need to extend React.Component– Example:

class HelloDevGeekWeek extends React.Component { ...

}

● React Components need to have a render function which outputs the DOM elements of the component (easier to implement with JSX)

class HelloDevGeekWeek extends React.Component { render(){

Return (<div>Hello DevGeekWeek!</div>);}

}

Exercise 1

Let’s build a component that prints ‘Hello DevGeekWeek!’

Solution:https://github.com/ywarezk/react-jb-helloworldIn branch ‘master’

29

Properties

• We can use component properties to pass data to a react component– Example of passing data to React component:ReactDOM.render(

<HelloDevGeekWeek greeting=”Hello DevGeekWeek” />,document.getElementById('example'));

● After we pass the property we can access it in the component code○ Example:

class HelloDevGeekWeek extends React.Component {render(){return (

<div>{this.props.greeting}</div>);

}}

Exercise 2

• Add a greeting property to our HelloDevGeekWeek components• The component should print the text it gets in the greeting

Solution:https://github.com/ywarezk/react-jb-helloworldOn branch: feature/greeting-prop

30

Events

• We can handle events in our component• In your JSX component you can add events as attributes.

– Example:

render(){return (

<div><button onClick={this.alertHello} >

Alert</button><div>{this.props.greeting}</div>

</div>);

}

● We can now enter another method in our component class to deal with the event

Exercise 3

• In our component add a button and a click event to the button• The click event should show an alert with Hello World text

Solution:https://github.com/ywarezk/react-jb-helloworldOn branch: feature/react-events

31

State

• React Components need to know when they need to re-render• The components are connected to a state• When the state changes the component re-renders• React Components have a function: getInitialState which they can override

to set the initial state of the component• With ES6 you need to set the initial state in the constructor• React Components get a reference to its state by accessing: this.state• A Component can change its state by calling: this.setState• Components can’t change the state in the render function!

Exercise 4

• Our HelloDevGeekWeek button should toggle the visibility of the greeting– Set the initial state of the component to have a boolean

isGreetingShown marked true when the greeting is visible– When the user clicks the button the this.setState should toggle the

isGreetingShown state variable– When the isGreetingShown is true we display the greeting, otherwise

we hide it– The text on the button should also change from Show Greeting to Hide

Greeting according to the isGreetingShown state.Solution:https://github.com/ywarezk/react-jb-helloworldOn branch: feature/states

32

How can I build a full application with React?

If React is just used for building UI Component, How can I use it to build a large scale Web Application

Redux

• Redux is an application architecture commonly used for building client side web applications

• Similar to Flux it keeps a Unidirectional Data Flow (better explained in the upcoming diagram)

• Redux can also work with other frameworks like AngularJS• Redux has 3 principles:

1. Single source of truth: the state of the app is located in a single store2. State is read-only and can only be changed via actions3. Changes to the state are executed by pure functions called Reducers

33

UniDirectional Data Flow with Redux

Store

Component

Action

Reducers

React Redux Movie App

• Using React & Redux we will create our first app• The app will display information about movies• The app will contain a search box for searching movies• When the user clicks on ‘search’ it will query the Open Movie Database API

and display the information• To query a search term we need to send a GET request to the following url:

– http://www.omdbapi.com/?t=<SEARCH_TERM>&y=&plot=short&r=json

34

state machine - Exercise 5

• When you design your app with Redux, you have to start perceiving your app as a State Machine.

• In Redux we have a single store - single source of truth which holds our entire app state, as a JavaScript Object

• In our movie app, what will our State Machine look like?

Movie App State Machine

Initial State Loading Movies LoadedSearch

Clicked

Server

Responded

{isLoading: false,Movies: null

}

{isLoading: true,Movies: null

}

{isLoading: false,Movies: {MOVIE DATA}

}

35

Redux - Actions/Action Creators

• Component can change the state via actions

• Actions are plain JavaScript objects

• Action objects must contain a type attribute that indicate

the type of action performed

• Action Creators are functions that return an action object

• A State change is performed by calling

store.dispatch(<ACTION_CREATOR>);

Actions/Action Creators - Async Actions

• Actions Creators can also change the state asynchronously.• To change state asynchronously the action creator needs to return a function• The function receives the store dispatch function as a parameter • We can change the state asynchronously by calling the dispatch method

Example:

function changeStateAsyncSample(){

return function(dispatch){

setTimeout(function(){

dispatch(<ANOTHER ACTION CREATOR>);

}, 3000);

}

}

36

Action/Action Creators - Exercise 6

• In our Movie App we have 3 actions:– An action that changes the loading variable in the state (called when the

user hits the search button)– An action that changes the movies object in the state (called when we

receive the response from the movie API)– An action that requests data from the movie API server

• In our hello world project add a file called actions.js with the 3 actions described above

• Don’t forget to add that file to the index.html

Solution:https://github.com/ywarezk/react-jb-helloworldOn branch: feature/actions

Redux - Reducers

• Actions represent something that happened in the app, and return a payload

of data

• Actions do not describe how the state of the app will change

• For this we have reducers

• Reducers hold a reference to the state of the app, receive the action with the

action payload, and their job is to determine how the next state will look like

• The reducer is usually a function with a switch case statement for every

action

• Reducer is where we also define our initial state

• Redux will call our reducer with an undefined state when it needs our initial

state

37

Redux - Reducers Exercise 7

• Add a file in our movie app called: reducer.js• The file will contain our initial state and our reducer

Solution:https://github.com/ywarezk/react-jb-helloworldOn branch: feature/reducer

Redux - Store

• Holds the entire state of the application - our single source of truth

• You can get the state from the store via getState

• Allows the state to be update via dispatch(action)

• In Redux library there is a createStore method to create our store

– The create store receives our combined reducers as first argument

– The second argument is the initial state of our app, which is used for

server side rendering.

– Our Redux store needs to support asynchronous actions, for that we

need to apply middleware called redux-thunk

38

Redux - Store - Exercise 8

• Create a file named store.js

• In the file call createStore and pass it the reducer we created in exercise 7

• Apply the redux-thunk middleware to enable asynchronous actions

Solution:https://github.com/ywarezk/react-jb-helloworldOn branch: feature/store

Redux - Movie App Component

• Let’s try and connect our store, reducer, and actions to

our movie app flow with our components

• Our components will respond to app actions and start the

entire flow.

39

Redux - Component - Exercise 9

• Create a file named components.js

• In that file create our form in the render function with a search box and a

submit button

• Attach an event for the form submission which will print an alert with the text

in the search field

Solution:https://github.com/ywarezk/react-jb-helloworldOn branch: feature/search-form

Redux - Provider - Exercise 10

• We created a redux store previously, now we need to make that store

available to our components

• For that we use react-redux Provider, which makes our store available to our

components

• In our ReactDom.render function wrap our components with the provider

components

• The provider component needs to receive the store we created earlierSolution:https://github.com/ywarezk/react-jb-helloworldOn branch: feature/wrap-provider

40

Redux - Passing State & Actions

• We want our search component to be connected to the state and the actions• We can use ReactRedux connect method for that• The connect method receives two arguments:

– mapStateToProps - a function that receives the state and returns an object with the part from the state that will be transferred to the component properties

– mapDispatchToProps - function that receives the store dispatch function and returns an object with the actions connected to the store. This will also be transferred to the component properties, to help us connect action creators to disptach we can use bindActionCreators

• Our component will re-render when the state that the component is connected to changes

Exercise 11 - Connecting component

• We will now connect our SearchForm component to our state and to our

action

• The SearchForm component will be connected to the isLoading and movie

state and to the requestMovieFromApi action

• When isLoading is true we will display a loading text

• The submit button will call the requestMovieFromApi

• We will display the movies we got from the API

Solution:https://github.com/ywarezk/react-jb-helloworldOn branch: feature/final

41

Final Notes

• Recommended Starter Kits:

– https://github.com/davezuko/react-redux-starter-kit

• This lecture is published in our facebook page

– Just search nerdeez

42