JavaScript ndash lubię to

Mirek Szajowski

Programista

Agenda

WWWSTREAMSOFTPL

Język

Modułowość

Zależnościbiblioteki zewnętrzne

CSS

Testy Linty

Narzędzia do budowania

Frameworks

Język

WWWSTREAMSOFTPL

Język -ECMAScript 5

WWWSTREAMSOFTPL

function EventBus() thislisteners = []EventBusprototypeaddListener = function (listener) let index = thislistenersindexOf(listener) if (index == -1) throw new Error(Listener already added) thislistenerspush(listener)EventBusprototyperemoveListener = function (listener) let index = thislistenersindexOf(listener) thislistenerssplice(index 1)EventBusprototypefire = function (eventName eventData) for (var i = 0 i lt thislistenerslength i++) var listener = thislisteners[i] if (listenereventName === eventName) listenerhandle(eventData)

var eb = new EventBus()

var listener = eventName RowSelected handle function (data) consolelog(RowSelected data) ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

Język -ECMAScript 5

WWWSTREAMSOFTPL

Język ndash ECMAScript 62015

WWWSTREAMSOFTPL

class EventBus constructor() thislisteners = new Set() addListener(listener) let contains = thislistenershas(listener) if (contains) throw new Error(Listener already added) thislistenersadd(listener) removeListener(listener) thislistenersdelete(listener) fire(eventName eventData) for (let listener of thislisteners) if (listenereventName === eventName) listenerhandle(eventData)

var eb = new EventBus()

var listener = eventName RowSelected handle (data) =gt consolelog(RowSelected data) ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

Język -ECMAScript 6

WWWSTREAMSOFTPL

Język - Babel

WWWSTREAMSOFTPL

Stages

Agenda

WWWSTREAMSOFTPL

Język

Modułowość

Zależnościbiblioteki zewnętrzne

CSS

Testy Linty

Narzędzia do budowania

Frameworks

Język

WWWSTREAMSOFTPL

Język -ECMAScript 5

WWWSTREAMSOFTPL

function EventBus() thislisteners = []EventBusprototypeaddListener = function (listener) let index = thislistenersindexOf(listener) if (index == -1) throw new Error(Listener already added) thislistenerspush(listener)EventBusprototyperemoveListener = function (listener) let index = thislistenersindexOf(listener) thislistenerssplice(index 1)EventBusprototypefire = function (eventName eventData) for (var i = 0 i lt thislistenerslength i++) var listener = thislisteners[i] if (listenereventName === eventName) listenerhandle(eventData)

var eb = new EventBus()

var listener = eventName RowSelected handle function (data) consolelog(RowSelected data) ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

Język -ECMAScript 5

WWWSTREAMSOFTPL

Język ndash ECMAScript 62015

WWWSTREAMSOFTPL

class EventBus constructor() thislisteners = new Set() addListener(listener) let contains = thislistenershas(listener) if (contains) throw new Error(Listener already added) thislistenersadd(listener) removeListener(listener) thislistenersdelete(listener) fire(eventName eventData) for (let listener of thislisteners) if (listenereventName === eventName) listenerhandle(eventData)

var eb = new EventBus()

var listener = eventName RowSelected handle (data) =gt consolelog(RowSelected data) ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

Język -ECMAScript 6

WWWSTREAMSOFTPL

Język - Babel

WWWSTREAMSOFTPL

Stages

Język

WWWSTREAMSOFTPL

Język -ECMAScript 5

WWWSTREAMSOFTPL

function EventBus() thislisteners = []EventBusprototypeaddListener = function (listener) let index = thislistenersindexOf(listener) if (index == -1) throw new Error(Listener already added) thislistenerspush(listener)EventBusprototyperemoveListener = function (listener) let index = thislistenersindexOf(listener) thislistenerssplice(index 1)EventBusprototypefire = function (eventName eventData) for (var i = 0 i lt thislistenerslength i++) var listener = thislisteners[i] if (listenereventName === eventName) listenerhandle(eventData)

var eb = new EventBus()

var listener = eventName RowSelected handle function (data) consolelog(RowSelected data) ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

Język -ECMAScript 5

WWWSTREAMSOFTPL

Język ndash ECMAScript 62015

WWWSTREAMSOFTPL

class EventBus constructor() thislisteners = new Set() addListener(listener) let contains = thislistenershas(listener) if (contains) throw new Error(Listener already added) thislistenersadd(listener) removeListener(listener) thislistenersdelete(listener) fire(eventName eventData) for (let listener of thislisteners) if (listenereventName === eventName) listenerhandle(eventData)

var eb = new EventBus()

var listener = eventName RowSelected handle (data) =gt consolelog(RowSelected data) ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

Język -ECMAScript 6

WWWSTREAMSOFTPL

Język - Babel

WWWSTREAMSOFTPL

Stages

Język -ECMAScript 5

WWWSTREAMSOFTPL

function EventBus() thislisteners = []EventBusprototypeaddListener = function (listener) let index = thislistenersindexOf(listener) if (index == -1) throw new Error(Listener already added) thislistenerspush(listener)EventBusprototyperemoveListener = function (listener) let index = thislistenersindexOf(listener) thislistenerssplice(index 1)EventBusprototypefire = function (eventName eventData) for (var i = 0 i lt thislistenerslength i++) var listener = thislisteners[i] if (listenereventName === eventName) listenerhandle(eventData)

var eb = new EventBus()

var listener = eventName RowSelected handle function (data) consolelog(RowSelected data) ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

Język -ECMAScript 5

WWWSTREAMSOFTPL

Język ndash ECMAScript 62015

WWWSTREAMSOFTPL

class EventBus constructor() thislisteners = new Set() addListener(listener) let contains = thislistenershas(listener) if (contains) throw new Error(Listener already added) thislistenersadd(listener) removeListener(listener) thislistenersdelete(listener) fire(eventName eventData) for (let listener of thislisteners) if (listenereventName === eventName) listenerhandle(eventData)

var eb = new EventBus()

var listener = eventName RowSelected handle (data) =gt consolelog(RowSelected data) ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

Język -ECMAScript 6

WWWSTREAMSOFTPL

Język - Babel

WWWSTREAMSOFTPL

Stages

Język -ECMAScript 5

WWWSTREAMSOFTPL

Język ndash ECMAScript 62015

WWWSTREAMSOFTPL

class EventBus constructor() thislisteners = new Set() addListener(listener) let contains = thislistenershas(listener) if (contains) throw new Error(Listener already added) thislistenersadd(listener) removeListener(listener) thislistenersdelete(listener) fire(eventName eventData) for (let listener of thislisteners) if (listenereventName === eventName) listenerhandle(eventData)

var eb = new EventBus()

var listener = eventName RowSelected handle (data) =gt consolelog(RowSelected data) ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

Język -ECMAScript 6

WWWSTREAMSOFTPL

Język - Babel

WWWSTREAMSOFTPL

Stages

Język ndash ECMAScript 62015

WWWSTREAMSOFTPL

class EventBus constructor() thislisteners = new Set() addListener(listener) let contains = thislistenershas(listener) if (contains) throw new Error(Listener already added) thislistenersadd(listener) removeListener(listener) thislistenersdelete(listener) fire(eventName eventData) for (let listener of thislisteners) if (listenereventName === eventName) listenerhandle(eventData)

var eb = new EventBus()

var listener = eventName RowSelected handle (data) =gt consolelog(RowSelected data) ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

Język -ECMAScript 6

WWWSTREAMSOFTPL

Język - Babel

WWWSTREAMSOFTPL

Stages

Język -ECMAScript 6

WWWSTREAMSOFTPL

Język - Babel

WWWSTREAMSOFTPL

Stages

Język - Babel

WWWSTREAMSOFTPL

Stages

Język ndash ECMAScript 7

WWWSTREAMSOFTPL

$GET(getLogin (user) =gt $GET(getAssignedModulesuser (assignedModules) =gt

$GET(getLasOpenedModule assignedModules (lastOpened) =gt $GET(loadModuleData lastOpened (data) =gt

open(data)

)

Język ndash ECMAScript 7

WWWSTREAMSOFTPL

var logged =$GET(isLogged)loggedthen((user) =gt

return $GET(getAssignedModulesuser))then((assignedModules) =gt

return $GET(getLasOpenedModule assignedModules))then((assignedModules) =gt

return $GET(loadModuleData lastOpened))then((data) =gt

open(data))

Język ndash ECMAScript 7

WWWSTREAMSOFTPL

function async load()var user = await $GET(isLogged)var assignedModules = await $GET(getAssignedModulesuser)var lastOpened = await $GET(getLasOpenedModuleassignedModules)var data = await $GET(loadModuleDatalastOpened)open(data)

Język ndash ECMAScript 7

WWWSTREAMSOFTPL

function async load()try

var user = await $GET(isLogged)var assignedModules = await $GET(getAssignedModulesuser)var lastOpened = await $GET(getLasOpenedModuleassignedModules)var data = await $GET(loadModuleDatalastOpened)open(data)

catch(e)

Język - TypeScript

WWWSTREAMSOFTPL

interface Listener eventNamestring handle(dataany) =gt voidclass EventBusltL extends Listenergt private listenersSetltLgt = new Set()

addListener(listenerL) let contains = thislistenershas(listener) if (contains) throw new Error(Listener already added) thislistenersadd(listener)

removeListener(listenerL) thislistenersdelete(listener)

fire(eventName eventData) for (var listener of thislisteners) if (listenereventName === eventName) listenerhandle(eventData)

var eb = new EventBus()

var listener = eventName RowSelected handle (data) =gt consolelog(RowSelected data) ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

Język ndash ECMAScript 7

WWWSTREAMSOFTPL

var logged =$GET(isLogged)loggedthen((user) =gt

return $GET(getAssignedModulesuser))then((assignedModules) =gt

return $GET(getLasOpenedModule assignedModules))then((assignedModules) =gt

return $GET(loadModuleData lastOpened))then((data) =gt

open(data))

Język ndash ECMAScript 7

WWWSTREAMSOFTPL

function async load()var user = await $GET(isLogged)var assignedModules = await $GET(getAssignedModulesuser)var lastOpened = await $GET(getLasOpenedModuleassignedModules)var data = await $GET(loadModuleDatalastOpened)open(data)

Język ndash ECMAScript 7

WWWSTREAMSOFTPL

function async load()try

var user = await $GET(isLogged)var assignedModules = await $GET(getAssignedModulesuser)var lastOpened = await $GET(getLasOpenedModuleassignedModules)var data = await $GET(loadModuleDatalastOpened)open(data)

catch(e)

Język - TypeScript

WWWSTREAMSOFTPL

interface Listener eventNamestring handle(dataany) =gt voidclass EventBusltL extends Listenergt private listenersSetltLgt = new Set()

addListener(listenerL) let contains = thislistenershas(listener) if (contains) throw new Error(Listener already added) thislistenersadd(listener)

removeListener(listenerL) thislistenersdelete(listener)

fire(eventName eventData) for (var listener of thislisteners) if (listenereventName === eventName) listenerhandle(eventData)

var eb = new EventBus()

var listener = eventName RowSelected handle (data) =gt consolelog(RowSelected data) ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

Język ndash ECMAScript 7

WWWSTREAMSOFTPL

function async load()var user = await $GET(isLogged)var assignedModules = await $GET(getAssignedModulesuser)var lastOpened = await $GET(getLasOpenedModuleassignedModules)var data = await $GET(loadModuleDatalastOpened)open(data)

Język ndash ECMAScript 7

WWWSTREAMSOFTPL

function async load()try

var user = await $GET(isLogged)var assignedModules = await $GET(getAssignedModulesuser)var lastOpened = await $GET(getLasOpenedModuleassignedModules)var data = await $GET(loadModuleDatalastOpened)open(data)

catch(e)

Język - TypeScript

WWWSTREAMSOFTPL

interface Listener eventNamestring handle(dataany) =gt voidclass EventBusltL extends Listenergt private listenersSetltLgt = new Set()

addListener(listenerL) let contains = thislistenershas(listener) if (contains) throw new Error(Listener already added) thislistenersadd(listener)

removeListener(listenerL) thislistenersdelete(listener)

fire(eventName eventData) for (var listener of thislisteners) if (listenereventName === eventName) listenerhandle(eventData)

var eb = new EventBus()

var listener = eventName RowSelected handle (data) =gt consolelog(RowSelected data) ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

Język ndash ECMAScript 7

WWWSTREAMSOFTPL

function async load()try

var user = await $GET(isLogged)var assignedModules = await $GET(getAssignedModulesuser)var lastOpened = await $GET(getLasOpenedModuleassignedModules)var data = await $GET(loadModuleDatalastOpened)open(data)

catch(e)

Język - TypeScript

WWWSTREAMSOFTPL

interface Listener eventNamestring handle(dataany) =gt voidclass EventBusltL extends Listenergt private listenersSetltLgt = new Set()

addListener(listenerL) let contains = thislistenershas(listener) if (contains) throw new Error(Listener already added) thislistenersadd(listener)

removeListener(listenerL) thislistenersdelete(listener)

fire(eventName eventData) for (var listener of thislisteners) if (listenereventName === eventName) listenerhandle(eventData)

var eb = new EventBus()

var listener = eventName RowSelected handle (data) =gt consolelog(RowSelected data) ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

Język - TypeScript

WWWSTREAMSOFTPL

interface Listener eventNamestring handle(dataany) =gt voidclass EventBusltL extends Listenergt private listenersSetltLgt = new Set()

addListener(listenerL) let contains = thislistenershas(listener) if (contains) throw new Error(Listener already added) thislistenersadd(listener)

removeListener(listenerL) thislistenersdelete(listener)

fire(eventName eventData) for (var listener of thislisteners) if (listenereventName === eventName) listenerhandle(eventData)

var eb = new EventBus()

var listener = eventName RowSelected handle (data) =gt consolelog(RowSelected data) ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

ModułowośćWieloplikowość

WWWSTREAMSOFTPL

Modułowość

WWWSTREAMSOFTPL

class EventBus constructor() thislisteners = new Set() addListener(listener) let contains = thislistenershas(listener) if (contains) throw new Error(Listener already added) thislistenersadd(listener) removeListener(listener) thislistenersdelete(listener) fire(eventName eventData) for (var listener of thislisteners) if (listenereventName === eventName) listenerhandle(eventData)

var eb = new EventBus()

var listener = eventName RowSelected handle (data) =gt consolelog(RowSelected data) ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

EventBusjs

TableRowSelectionjs

Modułowość

WWWSTREAMSOFTPL

ltDOCTYPE htmlgtlthtmlgt ltheadgt lttitlegtMy Sample Projectlttitlegt ltscript src=scriptsEventBusjsgtltscriptgt ltscript src=scriptsTableRowSelectionjsgtltscriptgt ltheadgt ltbodygt lth1gtMy Sample Projectlth1gt ltbodygtlthtmlgt

Modułowość

WWWSTREAMSOFTPL

ltDOCTYPE htmlgtlthtmlgt ltheadgt lttitlegtMy Sample Projectlttitlegt ltscript data-main=scriptsbootstrap src=scriptsrequirejsgtltscriptgt ltheadgt ltbodygt lth1gtMy Sample Projectlth1gt ltbodygtlthtmlgt

define([] function () definicja klasy EventBus return new EventBus())

EventBusjsdefine([EventBus] function (eb)

var listener =

ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

)

TableRowSelectionjs

Modułowość ndash CommonJS

WWWSTREAMSOFTPL

ltDOCTYPE htmlgtlthtmlgt ltheadgt lttitlegtMy Sample Projectlttitlegt ltscript src=scriptsbundlejsgtltscriptgt ltheadgt ltbodygt lth1gtMy Sample Projectlth1gt ltbodygtlthtmlgt

exportseb = new EventBus()

EventBusjs

var eb = require(EventBus)

var listener = ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

TableRowSelectionjs

Modułowość ndash ES6 Modules

WWWSTREAMSOFTPL

ltDOCTYPE htmlgtlthtmlgt ltheadgt lttitlegtMy Sample Projectlttitlegt ltscript src=scriptsbundlejsgtltscriptgt ltheadgt ltbodygt lth1gtMy Sample Projectlth1gt ltbodygtlthtmlgt

EventBusjs

import eventBus as eb from EventBus

var listener = ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

TableRowSelectionjs

var eventBus = new EventBus()export eventBus

Biblioteki zewnętrzne

WWWSTREAMSOFTPL

Biblioteki zewnętrzne

WWWSTREAMSOFTPL

npm install lodash --savenpm install jquery --save

import $ from jquery

import _ from lodash

name sample-project version 100 dependencies lodash ^405 jquery ^200 devDependencies webpack ^125

packagejs

npm install webpack --save-dev

Css

WWWSTREAMSOFTPL

Css ndash LessSaas

WWWSTREAMSOFTPL

import from-colors

class1 background-color color-base class2 background-color fff color lighten(color-base 10)

class1 background-color 2d5e8bclass1 class2 background-color fff color 1d4e7b

CssModules - Webpack

WWWSTREAMSOFTPL

import common

important tr td ampextend(optimistic) font-weight bold

global fancy background-color lightcyan

use strictimport template from templatehbsimport styles from TableCoponentless Created by Mirek on 2016-02-16 class TableComponent

renderTo(target) thistarget = target targethtml(template(styles))

ltdiv class=panel panel-defaultgt ltdiv class=panel-bodygt lttable class=table table-striped stylesimportant fancy table-hovergt lttrgt

TableComponentlessTableComponentes6

TableComponenthbs

ltdiv class=panel-bodygt lttable class=table table-striped TableCoponent__important___2NlR_ fancy table-hovergt

Css -autoprefixer

WWWSTREAMSOFTPL

example display flex transition all 5s user-select none background linear-gradient(to bottom white black)

example display -webkit-box display -webkit-flex display -ms-flexbox display flex -webkit-transition all 5s transition all 5s -webkit-user-select none -moz-user-select none -ms-user-select none user-select none background -webkit-linear-gradient(top white black) background linear-gradient(to bottom white black)

Testy

WWWSTREAMSOFTPL

Testy ndash mocha + chai

WWWSTREAMSOFTPL

import eb from EventBusES6describe(Component interactions Tests () =gt describe(EventBus Tests () =gt afterEach(() =gt eblistenersclear() ) it(should add listener () =gt given var currentSize = eblistenerssize when ebaddListener(listener) then expect(eblistenerssize)tobeeq(currentSize + 1) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt var sandbox beforeEach(function () sandbox = sinonsandboxcreate() ) afterEach(function () sandboxrestore() ) it(should invoke listener handler function () given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when ebfire(RowSelected eventData)

then expect(stub)tohavebeencalledOnce )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt it(should invoke listener handler function (done) given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when var promise= ebfire(RowSelected eventData)

then promisethen(()=gt expect(stub)tohavebeencalledOnce then(done done) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt ita(should invoke listener handler async () given var spy = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when await ebfire(RowSelected eventData)

then expect(spy)tohavebeencalledOnce

)

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

Testy ndash KarmaPhantomJS

WWWSTREAMSOFTPL

moduleexports = function (config) configset( files [ testjs ] frameworks [mocha chai] browsers [Chrome PhantomJS] plugins [ karma-chrome-launcher karma-mocha karma-chai ] junitReporter outputFile test_outunitxml suite unit )

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

casperstart(url)then(function() casperclick(buttonopen-dialog)

phantomcssscreenshot(the-dialog Dialog screenshot)

)casperthen(function now_check_the_screenshots()

phantomcsscompareAll())

Linty

WWWSTREAMSOFTPL

Isparta

NYC

Linty

reporters [ progress coverage ] coverageReporter type cobertura dir coveragewebpack module preLoaders [ ltlt add subject as webpacks preloader test (jsx)|(js)$ exclude this dirs from coverage exclude node_modules loader isparta-instrumenter-loader ] )

Linty

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Modułowość

WWWSTREAMSOFTPL

class EventBus constructor() thislisteners = new Set() addListener(listener) let contains = thislistenershas(listener) if (contains) throw new Error(Listener already added) thislistenersadd(listener) removeListener(listener) thislistenersdelete(listener) fire(eventName eventData) for (var listener of thislisteners) if (listenereventName === eventName) listenerhandle(eventData)

var eb = new EventBus()

var listener = eventName RowSelected handle (data) =gt consolelog(RowSelected data) ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

EventBusjs

TableRowSelectionjs

Modułowość

WWWSTREAMSOFTPL

ltDOCTYPE htmlgtlthtmlgt ltheadgt lttitlegtMy Sample Projectlttitlegt ltscript src=scriptsEventBusjsgtltscriptgt ltscript src=scriptsTableRowSelectionjsgtltscriptgt ltheadgt ltbodygt lth1gtMy Sample Projectlth1gt ltbodygtlthtmlgt

Modułowość

WWWSTREAMSOFTPL

ltDOCTYPE htmlgtlthtmlgt ltheadgt lttitlegtMy Sample Projectlttitlegt ltscript data-main=scriptsbootstrap src=scriptsrequirejsgtltscriptgt ltheadgt ltbodygt lth1gtMy Sample Projectlth1gt ltbodygtlthtmlgt

define([] function () definicja klasy EventBus return new EventBus())

EventBusjsdefine([EventBus] function (eb)

var listener =

ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

)

TableRowSelectionjs

Modułowość ndash CommonJS

WWWSTREAMSOFTPL

ltDOCTYPE htmlgtlthtmlgt ltheadgt lttitlegtMy Sample Projectlttitlegt ltscript src=scriptsbundlejsgtltscriptgt ltheadgt ltbodygt lth1gtMy Sample Projectlth1gt ltbodygtlthtmlgt

exportseb = new EventBus()

EventBusjs

var eb = require(EventBus)

var listener = ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

TableRowSelectionjs

Modułowość ndash ES6 Modules

WWWSTREAMSOFTPL

ltDOCTYPE htmlgtlthtmlgt ltheadgt lttitlegtMy Sample Projectlttitlegt ltscript src=scriptsbundlejsgtltscriptgt ltheadgt ltbodygt lth1gtMy Sample Projectlth1gt ltbodygtlthtmlgt

EventBusjs

import eventBus as eb from EventBus

var listener = ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

TableRowSelectionjs

var eventBus = new EventBus()export eventBus

Biblioteki zewnętrzne

WWWSTREAMSOFTPL

Biblioteki zewnętrzne

WWWSTREAMSOFTPL

npm install lodash --savenpm install jquery --save

import $ from jquery

import _ from lodash

name sample-project version 100 dependencies lodash ^405 jquery ^200 devDependencies webpack ^125

packagejs

npm install webpack --save-dev

Css

WWWSTREAMSOFTPL

Css ndash LessSaas

WWWSTREAMSOFTPL

import from-colors

class1 background-color color-base class2 background-color fff color lighten(color-base 10)

class1 background-color 2d5e8bclass1 class2 background-color fff color 1d4e7b

CssModules - Webpack

WWWSTREAMSOFTPL

import common

important tr td ampextend(optimistic) font-weight bold

global fancy background-color lightcyan

use strictimport template from templatehbsimport styles from TableCoponentless Created by Mirek on 2016-02-16 class TableComponent

renderTo(target) thistarget = target targethtml(template(styles))

ltdiv class=panel panel-defaultgt ltdiv class=panel-bodygt lttable class=table table-striped stylesimportant fancy table-hovergt lttrgt

TableComponentlessTableComponentes6

TableComponenthbs

ltdiv class=panel-bodygt lttable class=table table-striped TableCoponent__important___2NlR_ fancy table-hovergt

Css -autoprefixer

WWWSTREAMSOFTPL

example display flex transition all 5s user-select none background linear-gradient(to bottom white black)

example display -webkit-box display -webkit-flex display -ms-flexbox display flex -webkit-transition all 5s transition all 5s -webkit-user-select none -moz-user-select none -ms-user-select none user-select none background -webkit-linear-gradient(top white black) background linear-gradient(to bottom white black)

Testy

WWWSTREAMSOFTPL

Testy ndash mocha + chai

WWWSTREAMSOFTPL

import eb from EventBusES6describe(Component interactions Tests () =gt describe(EventBus Tests () =gt afterEach(() =gt eblistenersclear() ) it(should add listener () =gt given var currentSize = eblistenerssize when ebaddListener(listener) then expect(eblistenerssize)tobeeq(currentSize + 1) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt var sandbox beforeEach(function () sandbox = sinonsandboxcreate() ) afterEach(function () sandboxrestore() ) it(should invoke listener handler function () given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when ebfire(RowSelected eventData)

then expect(stub)tohavebeencalledOnce )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt it(should invoke listener handler function (done) given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when var promise= ebfire(RowSelected eventData)

then promisethen(()=gt expect(stub)tohavebeencalledOnce then(done done) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt ita(should invoke listener handler async () given var spy = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when await ebfire(RowSelected eventData)

then expect(spy)tohavebeencalledOnce

)

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

Testy ndash KarmaPhantomJS

WWWSTREAMSOFTPL

moduleexports = function (config) configset( files [ testjs ] frameworks [mocha chai] browsers [Chrome PhantomJS] plugins [ karma-chrome-launcher karma-mocha karma-chai ] junitReporter outputFile test_outunitxml suite unit )

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

casperstart(url)then(function() casperclick(buttonopen-dialog)

phantomcssscreenshot(the-dialog Dialog screenshot)

)casperthen(function now_check_the_screenshots()

phantomcsscompareAll())

Linty

WWWSTREAMSOFTPL

Isparta

NYC

Linty

reporters [ progress coverage ] coverageReporter type cobertura dir coveragewebpack module preLoaders [ ltlt add subject as webpacks preloader test (jsx)|(js)$ exclude this dirs from coverage exclude node_modules loader isparta-instrumenter-loader ] )

Linty

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Modułowość

WWWSTREAMSOFTPL

ltDOCTYPE htmlgtlthtmlgt ltheadgt lttitlegtMy Sample Projectlttitlegt ltscript src=scriptsEventBusjsgtltscriptgt ltscript src=scriptsTableRowSelectionjsgtltscriptgt ltheadgt ltbodygt lth1gtMy Sample Projectlth1gt ltbodygtlthtmlgt

Modułowość

WWWSTREAMSOFTPL

ltDOCTYPE htmlgtlthtmlgt ltheadgt lttitlegtMy Sample Projectlttitlegt ltscript data-main=scriptsbootstrap src=scriptsrequirejsgtltscriptgt ltheadgt ltbodygt lth1gtMy Sample Projectlth1gt ltbodygtlthtmlgt

define([] function () definicja klasy EventBus return new EventBus())

EventBusjsdefine([EventBus] function (eb)

var listener =

ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

)

TableRowSelectionjs

Modułowość ndash CommonJS

WWWSTREAMSOFTPL

ltDOCTYPE htmlgtlthtmlgt ltheadgt lttitlegtMy Sample Projectlttitlegt ltscript src=scriptsbundlejsgtltscriptgt ltheadgt ltbodygt lth1gtMy Sample Projectlth1gt ltbodygtlthtmlgt

exportseb = new EventBus()

EventBusjs

var eb = require(EventBus)

var listener = ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

TableRowSelectionjs

Modułowość ndash ES6 Modules

WWWSTREAMSOFTPL

ltDOCTYPE htmlgtlthtmlgt ltheadgt lttitlegtMy Sample Projectlttitlegt ltscript src=scriptsbundlejsgtltscriptgt ltheadgt ltbodygt lth1gtMy Sample Projectlth1gt ltbodygtlthtmlgt

EventBusjs

import eventBus as eb from EventBus

var listener = ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

TableRowSelectionjs

var eventBus = new EventBus()export eventBus

Biblioteki zewnętrzne

WWWSTREAMSOFTPL

Biblioteki zewnętrzne

WWWSTREAMSOFTPL

npm install lodash --savenpm install jquery --save

import $ from jquery

import _ from lodash

name sample-project version 100 dependencies lodash ^405 jquery ^200 devDependencies webpack ^125

packagejs

npm install webpack --save-dev

Css

WWWSTREAMSOFTPL

Css ndash LessSaas

WWWSTREAMSOFTPL

import from-colors

class1 background-color color-base class2 background-color fff color lighten(color-base 10)

class1 background-color 2d5e8bclass1 class2 background-color fff color 1d4e7b

CssModules - Webpack

WWWSTREAMSOFTPL

import common

important tr td ampextend(optimistic) font-weight bold

global fancy background-color lightcyan

use strictimport template from templatehbsimport styles from TableCoponentless Created by Mirek on 2016-02-16 class TableComponent

renderTo(target) thistarget = target targethtml(template(styles))

ltdiv class=panel panel-defaultgt ltdiv class=panel-bodygt lttable class=table table-striped stylesimportant fancy table-hovergt lttrgt

TableComponentlessTableComponentes6

TableComponenthbs

ltdiv class=panel-bodygt lttable class=table table-striped TableCoponent__important___2NlR_ fancy table-hovergt

Css -autoprefixer

WWWSTREAMSOFTPL

example display flex transition all 5s user-select none background linear-gradient(to bottom white black)

example display -webkit-box display -webkit-flex display -ms-flexbox display flex -webkit-transition all 5s transition all 5s -webkit-user-select none -moz-user-select none -ms-user-select none user-select none background -webkit-linear-gradient(top white black) background linear-gradient(to bottom white black)

Testy

WWWSTREAMSOFTPL

Testy ndash mocha + chai

WWWSTREAMSOFTPL

import eb from EventBusES6describe(Component interactions Tests () =gt describe(EventBus Tests () =gt afterEach(() =gt eblistenersclear() ) it(should add listener () =gt given var currentSize = eblistenerssize when ebaddListener(listener) then expect(eblistenerssize)tobeeq(currentSize + 1) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt var sandbox beforeEach(function () sandbox = sinonsandboxcreate() ) afterEach(function () sandboxrestore() ) it(should invoke listener handler function () given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when ebfire(RowSelected eventData)

then expect(stub)tohavebeencalledOnce )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt it(should invoke listener handler function (done) given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when var promise= ebfire(RowSelected eventData)

then promisethen(()=gt expect(stub)tohavebeencalledOnce then(done done) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt ita(should invoke listener handler async () given var spy = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when await ebfire(RowSelected eventData)

then expect(spy)tohavebeencalledOnce

)

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

Testy ndash KarmaPhantomJS

WWWSTREAMSOFTPL

moduleexports = function (config) configset( files [ testjs ] frameworks [mocha chai] browsers [Chrome PhantomJS] plugins [ karma-chrome-launcher karma-mocha karma-chai ] junitReporter outputFile test_outunitxml suite unit )

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

casperstart(url)then(function() casperclick(buttonopen-dialog)

phantomcssscreenshot(the-dialog Dialog screenshot)

)casperthen(function now_check_the_screenshots()

phantomcsscompareAll())

Linty

WWWSTREAMSOFTPL

Isparta

NYC

Linty

reporters [ progress coverage ] coverageReporter type cobertura dir coveragewebpack module preLoaders [ ltlt add subject as webpacks preloader test (jsx)|(js)$ exclude this dirs from coverage exclude node_modules loader isparta-instrumenter-loader ] )

Linty

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Modułowość

WWWSTREAMSOFTPL

ltDOCTYPE htmlgtlthtmlgt ltheadgt lttitlegtMy Sample Projectlttitlegt ltscript data-main=scriptsbootstrap src=scriptsrequirejsgtltscriptgt ltheadgt ltbodygt lth1gtMy Sample Projectlth1gt ltbodygtlthtmlgt

define([] function () definicja klasy EventBus return new EventBus())

EventBusjsdefine([EventBus] function (eb)

var listener =

ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

)

TableRowSelectionjs

Modułowość ndash CommonJS

WWWSTREAMSOFTPL

ltDOCTYPE htmlgtlthtmlgt ltheadgt lttitlegtMy Sample Projectlttitlegt ltscript src=scriptsbundlejsgtltscriptgt ltheadgt ltbodygt lth1gtMy Sample Projectlth1gt ltbodygtlthtmlgt

exportseb = new EventBus()

EventBusjs

var eb = require(EventBus)

var listener = ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

TableRowSelectionjs

Modułowość ndash ES6 Modules

WWWSTREAMSOFTPL

ltDOCTYPE htmlgtlthtmlgt ltheadgt lttitlegtMy Sample Projectlttitlegt ltscript src=scriptsbundlejsgtltscriptgt ltheadgt ltbodygt lth1gtMy Sample Projectlth1gt ltbodygtlthtmlgt

EventBusjs

import eventBus as eb from EventBus

var listener = ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

TableRowSelectionjs

var eventBus = new EventBus()export eventBus

Biblioteki zewnętrzne

WWWSTREAMSOFTPL

Biblioteki zewnętrzne

WWWSTREAMSOFTPL

npm install lodash --savenpm install jquery --save

import $ from jquery

import _ from lodash

name sample-project version 100 dependencies lodash ^405 jquery ^200 devDependencies webpack ^125

packagejs

npm install webpack --save-dev

Css

WWWSTREAMSOFTPL

Css ndash LessSaas

WWWSTREAMSOFTPL

import from-colors

class1 background-color color-base class2 background-color fff color lighten(color-base 10)

class1 background-color 2d5e8bclass1 class2 background-color fff color 1d4e7b

CssModules - Webpack

WWWSTREAMSOFTPL

import common

important tr td ampextend(optimistic) font-weight bold

global fancy background-color lightcyan

use strictimport template from templatehbsimport styles from TableCoponentless Created by Mirek on 2016-02-16 class TableComponent

renderTo(target) thistarget = target targethtml(template(styles))

ltdiv class=panel panel-defaultgt ltdiv class=panel-bodygt lttable class=table table-striped stylesimportant fancy table-hovergt lttrgt

TableComponentlessTableComponentes6

TableComponenthbs

ltdiv class=panel-bodygt lttable class=table table-striped TableCoponent__important___2NlR_ fancy table-hovergt

Css -autoprefixer

WWWSTREAMSOFTPL

example display flex transition all 5s user-select none background linear-gradient(to bottom white black)

example display -webkit-box display -webkit-flex display -ms-flexbox display flex -webkit-transition all 5s transition all 5s -webkit-user-select none -moz-user-select none -ms-user-select none user-select none background -webkit-linear-gradient(top white black) background linear-gradient(to bottom white black)

Testy

WWWSTREAMSOFTPL

Testy ndash mocha + chai

WWWSTREAMSOFTPL

import eb from EventBusES6describe(Component interactions Tests () =gt describe(EventBus Tests () =gt afterEach(() =gt eblistenersclear() ) it(should add listener () =gt given var currentSize = eblistenerssize when ebaddListener(listener) then expect(eblistenerssize)tobeeq(currentSize + 1) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt var sandbox beforeEach(function () sandbox = sinonsandboxcreate() ) afterEach(function () sandboxrestore() ) it(should invoke listener handler function () given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when ebfire(RowSelected eventData)

then expect(stub)tohavebeencalledOnce )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt it(should invoke listener handler function (done) given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when var promise= ebfire(RowSelected eventData)

then promisethen(()=gt expect(stub)tohavebeencalledOnce then(done done) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt ita(should invoke listener handler async () given var spy = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when await ebfire(RowSelected eventData)

then expect(spy)tohavebeencalledOnce

)

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

Testy ndash KarmaPhantomJS

WWWSTREAMSOFTPL

moduleexports = function (config) configset( files [ testjs ] frameworks [mocha chai] browsers [Chrome PhantomJS] plugins [ karma-chrome-launcher karma-mocha karma-chai ] junitReporter outputFile test_outunitxml suite unit )

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

casperstart(url)then(function() casperclick(buttonopen-dialog)

phantomcssscreenshot(the-dialog Dialog screenshot)

)casperthen(function now_check_the_screenshots()

phantomcsscompareAll())

Linty

WWWSTREAMSOFTPL

Isparta

NYC

Linty

reporters [ progress coverage ] coverageReporter type cobertura dir coveragewebpack module preLoaders [ ltlt add subject as webpacks preloader test (jsx)|(js)$ exclude this dirs from coverage exclude node_modules loader isparta-instrumenter-loader ] )

Linty

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Modułowość ndash CommonJS

WWWSTREAMSOFTPL

ltDOCTYPE htmlgtlthtmlgt ltheadgt lttitlegtMy Sample Projectlttitlegt ltscript src=scriptsbundlejsgtltscriptgt ltheadgt ltbodygt lth1gtMy Sample Projectlth1gt ltbodygtlthtmlgt

exportseb = new EventBus()

EventBusjs

var eb = require(EventBus)

var listener = ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

TableRowSelectionjs

Modułowość ndash ES6 Modules

WWWSTREAMSOFTPL

ltDOCTYPE htmlgtlthtmlgt ltheadgt lttitlegtMy Sample Projectlttitlegt ltscript src=scriptsbundlejsgtltscriptgt ltheadgt ltbodygt lth1gtMy Sample Projectlth1gt ltbodygtlthtmlgt

EventBusjs

import eventBus as eb from EventBus

var listener = ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

TableRowSelectionjs

var eventBus = new EventBus()export eventBus

Biblioteki zewnętrzne

WWWSTREAMSOFTPL

Biblioteki zewnętrzne

WWWSTREAMSOFTPL

npm install lodash --savenpm install jquery --save

import $ from jquery

import _ from lodash

name sample-project version 100 dependencies lodash ^405 jquery ^200 devDependencies webpack ^125

packagejs

npm install webpack --save-dev

Css

WWWSTREAMSOFTPL

Css ndash LessSaas

WWWSTREAMSOFTPL

import from-colors

class1 background-color color-base class2 background-color fff color lighten(color-base 10)

class1 background-color 2d5e8bclass1 class2 background-color fff color 1d4e7b

CssModules - Webpack

WWWSTREAMSOFTPL

import common

important tr td ampextend(optimistic) font-weight bold

global fancy background-color lightcyan

use strictimport template from templatehbsimport styles from TableCoponentless Created by Mirek on 2016-02-16 class TableComponent

renderTo(target) thistarget = target targethtml(template(styles))

ltdiv class=panel panel-defaultgt ltdiv class=panel-bodygt lttable class=table table-striped stylesimportant fancy table-hovergt lttrgt

TableComponentlessTableComponentes6

TableComponenthbs

ltdiv class=panel-bodygt lttable class=table table-striped TableCoponent__important___2NlR_ fancy table-hovergt

Css -autoprefixer

WWWSTREAMSOFTPL

example display flex transition all 5s user-select none background linear-gradient(to bottom white black)

example display -webkit-box display -webkit-flex display -ms-flexbox display flex -webkit-transition all 5s transition all 5s -webkit-user-select none -moz-user-select none -ms-user-select none user-select none background -webkit-linear-gradient(top white black) background linear-gradient(to bottom white black)

Testy

WWWSTREAMSOFTPL

Testy ndash mocha + chai

WWWSTREAMSOFTPL

import eb from EventBusES6describe(Component interactions Tests () =gt describe(EventBus Tests () =gt afterEach(() =gt eblistenersclear() ) it(should add listener () =gt given var currentSize = eblistenerssize when ebaddListener(listener) then expect(eblistenerssize)tobeeq(currentSize + 1) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt var sandbox beforeEach(function () sandbox = sinonsandboxcreate() ) afterEach(function () sandboxrestore() ) it(should invoke listener handler function () given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when ebfire(RowSelected eventData)

then expect(stub)tohavebeencalledOnce )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt it(should invoke listener handler function (done) given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when var promise= ebfire(RowSelected eventData)

then promisethen(()=gt expect(stub)tohavebeencalledOnce then(done done) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt ita(should invoke listener handler async () given var spy = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when await ebfire(RowSelected eventData)

then expect(spy)tohavebeencalledOnce

)

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

Testy ndash KarmaPhantomJS

WWWSTREAMSOFTPL

moduleexports = function (config) configset( files [ testjs ] frameworks [mocha chai] browsers [Chrome PhantomJS] plugins [ karma-chrome-launcher karma-mocha karma-chai ] junitReporter outputFile test_outunitxml suite unit )

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

casperstart(url)then(function() casperclick(buttonopen-dialog)

phantomcssscreenshot(the-dialog Dialog screenshot)

)casperthen(function now_check_the_screenshots()

phantomcsscompareAll())

Linty

WWWSTREAMSOFTPL

Isparta

NYC

Linty

reporters [ progress coverage ] coverageReporter type cobertura dir coveragewebpack module preLoaders [ ltlt add subject as webpacks preloader test (jsx)|(js)$ exclude this dirs from coverage exclude node_modules loader isparta-instrumenter-loader ] )

Linty

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Modułowość ndash ES6 Modules

WWWSTREAMSOFTPL

ltDOCTYPE htmlgtlthtmlgt ltheadgt lttitlegtMy Sample Projectlttitlegt ltscript src=scriptsbundlejsgtltscriptgt ltheadgt ltbodygt lth1gtMy Sample Projectlth1gt ltbodygtlthtmlgt

EventBusjs

import eventBus as eb from EventBus

var listener = ebaddListener(listener)

ebfire(RowSelected id 1)ebfire(RowSelected id 2)ebremoveListener(listener)

TableRowSelectionjs

var eventBus = new EventBus()export eventBus

Biblioteki zewnętrzne

WWWSTREAMSOFTPL

Biblioteki zewnętrzne

WWWSTREAMSOFTPL

npm install lodash --savenpm install jquery --save

import $ from jquery

import _ from lodash

name sample-project version 100 dependencies lodash ^405 jquery ^200 devDependencies webpack ^125

packagejs

npm install webpack --save-dev

Css

WWWSTREAMSOFTPL

Css ndash LessSaas

WWWSTREAMSOFTPL

import from-colors

class1 background-color color-base class2 background-color fff color lighten(color-base 10)

class1 background-color 2d5e8bclass1 class2 background-color fff color 1d4e7b

CssModules - Webpack

WWWSTREAMSOFTPL

import common

important tr td ampextend(optimistic) font-weight bold

global fancy background-color lightcyan

use strictimport template from templatehbsimport styles from TableCoponentless Created by Mirek on 2016-02-16 class TableComponent

renderTo(target) thistarget = target targethtml(template(styles))

ltdiv class=panel panel-defaultgt ltdiv class=panel-bodygt lttable class=table table-striped stylesimportant fancy table-hovergt lttrgt

TableComponentlessTableComponentes6

TableComponenthbs

ltdiv class=panel-bodygt lttable class=table table-striped TableCoponent__important___2NlR_ fancy table-hovergt

Css -autoprefixer

WWWSTREAMSOFTPL

example display flex transition all 5s user-select none background linear-gradient(to bottom white black)

example display -webkit-box display -webkit-flex display -ms-flexbox display flex -webkit-transition all 5s transition all 5s -webkit-user-select none -moz-user-select none -ms-user-select none user-select none background -webkit-linear-gradient(top white black) background linear-gradient(to bottom white black)

Testy

WWWSTREAMSOFTPL

Testy ndash mocha + chai

WWWSTREAMSOFTPL

import eb from EventBusES6describe(Component interactions Tests () =gt describe(EventBus Tests () =gt afterEach(() =gt eblistenersclear() ) it(should add listener () =gt given var currentSize = eblistenerssize when ebaddListener(listener) then expect(eblistenerssize)tobeeq(currentSize + 1) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt var sandbox beforeEach(function () sandbox = sinonsandboxcreate() ) afterEach(function () sandboxrestore() ) it(should invoke listener handler function () given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when ebfire(RowSelected eventData)

then expect(stub)tohavebeencalledOnce )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt it(should invoke listener handler function (done) given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when var promise= ebfire(RowSelected eventData)

then promisethen(()=gt expect(stub)tohavebeencalledOnce then(done done) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt ita(should invoke listener handler async () given var spy = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when await ebfire(RowSelected eventData)

then expect(spy)tohavebeencalledOnce

)

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

Testy ndash KarmaPhantomJS

WWWSTREAMSOFTPL

moduleexports = function (config) configset( files [ testjs ] frameworks [mocha chai] browsers [Chrome PhantomJS] plugins [ karma-chrome-launcher karma-mocha karma-chai ] junitReporter outputFile test_outunitxml suite unit )

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

casperstart(url)then(function() casperclick(buttonopen-dialog)

phantomcssscreenshot(the-dialog Dialog screenshot)

)casperthen(function now_check_the_screenshots()

phantomcsscompareAll())

Linty

WWWSTREAMSOFTPL

Isparta

NYC

Linty

reporters [ progress coverage ] coverageReporter type cobertura dir coveragewebpack module preLoaders [ ltlt add subject as webpacks preloader test (jsx)|(js)$ exclude this dirs from coverage exclude node_modules loader isparta-instrumenter-loader ] )

Linty

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Biblioteki zewnętrzne

WWWSTREAMSOFTPL

Biblioteki zewnętrzne

WWWSTREAMSOFTPL

npm install lodash --savenpm install jquery --save

import $ from jquery

import _ from lodash

name sample-project version 100 dependencies lodash ^405 jquery ^200 devDependencies webpack ^125

packagejs

npm install webpack --save-dev

Css

WWWSTREAMSOFTPL

Css ndash LessSaas

WWWSTREAMSOFTPL

import from-colors

class1 background-color color-base class2 background-color fff color lighten(color-base 10)

class1 background-color 2d5e8bclass1 class2 background-color fff color 1d4e7b

CssModules - Webpack

WWWSTREAMSOFTPL

import common

important tr td ampextend(optimistic) font-weight bold

global fancy background-color lightcyan

use strictimport template from templatehbsimport styles from TableCoponentless Created by Mirek on 2016-02-16 class TableComponent

renderTo(target) thistarget = target targethtml(template(styles))

ltdiv class=panel panel-defaultgt ltdiv class=panel-bodygt lttable class=table table-striped stylesimportant fancy table-hovergt lttrgt

TableComponentlessTableComponentes6

TableComponenthbs

ltdiv class=panel-bodygt lttable class=table table-striped TableCoponent__important___2NlR_ fancy table-hovergt

Css -autoprefixer

WWWSTREAMSOFTPL

example display flex transition all 5s user-select none background linear-gradient(to bottom white black)

example display -webkit-box display -webkit-flex display -ms-flexbox display flex -webkit-transition all 5s transition all 5s -webkit-user-select none -moz-user-select none -ms-user-select none user-select none background -webkit-linear-gradient(top white black) background linear-gradient(to bottom white black)

Testy

WWWSTREAMSOFTPL

Testy ndash mocha + chai

WWWSTREAMSOFTPL

import eb from EventBusES6describe(Component interactions Tests () =gt describe(EventBus Tests () =gt afterEach(() =gt eblistenersclear() ) it(should add listener () =gt given var currentSize = eblistenerssize when ebaddListener(listener) then expect(eblistenerssize)tobeeq(currentSize + 1) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt var sandbox beforeEach(function () sandbox = sinonsandboxcreate() ) afterEach(function () sandboxrestore() ) it(should invoke listener handler function () given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when ebfire(RowSelected eventData)

then expect(stub)tohavebeencalledOnce )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt it(should invoke listener handler function (done) given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when var promise= ebfire(RowSelected eventData)

then promisethen(()=gt expect(stub)tohavebeencalledOnce then(done done) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt ita(should invoke listener handler async () given var spy = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when await ebfire(RowSelected eventData)

then expect(spy)tohavebeencalledOnce

)

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

Testy ndash KarmaPhantomJS

WWWSTREAMSOFTPL

moduleexports = function (config) configset( files [ testjs ] frameworks [mocha chai] browsers [Chrome PhantomJS] plugins [ karma-chrome-launcher karma-mocha karma-chai ] junitReporter outputFile test_outunitxml suite unit )

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

casperstart(url)then(function() casperclick(buttonopen-dialog)

phantomcssscreenshot(the-dialog Dialog screenshot)

)casperthen(function now_check_the_screenshots()

phantomcsscompareAll())

Linty

WWWSTREAMSOFTPL

Isparta

NYC

Linty

reporters [ progress coverage ] coverageReporter type cobertura dir coveragewebpack module preLoaders [ ltlt add subject as webpacks preloader test (jsx)|(js)$ exclude this dirs from coverage exclude node_modules loader isparta-instrumenter-loader ] )

Linty

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Biblioteki zewnętrzne

WWWSTREAMSOFTPL

npm install lodash --savenpm install jquery --save

import $ from jquery

import _ from lodash

name sample-project version 100 dependencies lodash ^405 jquery ^200 devDependencies webpack ^125

packagejs

npm install webpack --save-dev

Css

WWWSTREAMSOFTPL

Css ndash LessSaas

WWWSTREAMSOFTPL

import from-colors

class1 background-color color-base class2 background-color fff color lighten(color-base 10)

class1 background-color 2d5e8bclass1 class2 background-color fff color 1d4e7b

CssModules - Webpack

WWWSTREAMSOFTPL

import common

important tr td ampextend(optimistic) font-weight bold

global fancy background-color lightcyan

use strictimport template from templatehbsimport styles from TableCoponentless Created by Mirek on 2016-02-16 class TableComponent

renderTo(target) thistarget = target targethtml(template(styles))

ltdiv class=panel panel-defaultgt ltdiv class=panel-bodygt lttable class=table table-striped stylesimportant fancy table-hovergt lttrgt

TableComponentlessTableComponentes6

TableComponenthbs

ltdiv class=panel-bodygt lttable class=table table-striped TableCoponent__important___2NlR_ fancy table-hovergt

Css -autoprefixer

WWWSTREAMSOFTPL

example display flex transition all 5s user-select none background linear-gradient(to bottom white black)

example display -webkit-box display -webkit-flex display -ms-flexbox display flex -webkit-transition all 5s transition all 5s -webkit-user-select none -moz-user-select none -ms-user-select none user-select none background -webkit-linear-gradient(top white black) background linear-gradient(to bottom white black)

Testy

WWWSTREAMSOFTPL

Testy ndash mocha + chai

WWWSTREAMSOFTPL

import eb from EventBusES6describe(Component interactions Tests () =gt describe(EventBus Tests () =gt afterEach(() =gt eblistenersclear() ) it(should add listener () =gt given var currentSize = eblistenerssize when ebaddListener(listener) then expect(eblistenerssize)tobeeq(currentSize + 1) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt var sandbox beforeEach(function () sandbox = sinonsandboxcreate() ) afterEach(function () sandboxrestore() ) it(should invoke listener handler function () given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when ebfire(RowSelected eventData)

then expect(stub)tohavebeencalledOnce )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt it(should invoke listener handler function (done) given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when var promise= ebfire(RowSelected eventData)

then promisethen(()=gt expect(stub)tohavebeencalledOnce then(done done) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt ita(should invoke listener handler async () given var spy = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when await ebfire(RowSelected eventData)

then expect(spy)tohavebeencalledOnce

)

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

Testy ndash KarmaPhantomJS

WWWSTREAMSOFTPL

moduleexports = function (config) configset( files [ testjs ] frameworks [mocha chai] browsers [Chrome PhantomJS] plugins [ karma-chrome-launcher karma-mocha karma-chai ] junitReporter outputFile test_outunitxml suite unit )

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

casperstart(url)then(function() casperclick(buttonopen-dialog)

phantomcssscreenshot(the-dialog Dialog screenshot)

)casperthen(function now_check_the_screenshots()

phantomcsscompareAll())

Linty

WWWSTREAMSOFTPL

Isparta

NYC

Linty

reporters [ progress coverage ] coverageReporter type cobertura dir coveragewebpack module preLoaders [ ltlt add subject as webpacks preloader test (jsx)|(js)$ exclude this dirs from coverage exclude node_modules loader isparta-instrumenter-loader ] )

Linty

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Css

WWWSTREAMSOFTPL

Css ndash LessSaas

WWWSTREAMSOFTPL

import from-colors

class1 background-color color-base class2 background-color fff color lighten(color-base 10)

class1 background-color 2d5e8bclass1 class2 background-color fff color 1d4e7b

CssModules - Webpack

WWWSTREAMSOFTPL

import common

important tr td ampextend(optimistic) font-weight bold

global fancy background-color lightcyan

use strictimport template from templatehbsimport styles from TableCoponentless Created by Mirek on 2016-02-16 class TableComponent

renderTo(target) thistarget = target targethtml(template(styles))

ltdiv class=panel panel-defaultgt ltdiv class=panel-bodygt lttable class=table table-striped stylesimportant fancy table-hovergt lttrgt

TableComponentlessTableComponentes6

TableComponenthbs

ltdiv class=panel-bodygt lttable class=table table-striped TableCoponent__important___2NlR_ fancy table-hovergt

Css -autoprefixer

WWWSTREAMSOFTPL

example display flex transition all 5s user-select none background linear-gradient(to bottom white black)

example display -webkit-box display -webkit-flex display -ms-flexbox display flex -webkit-transition all 5s transition all 5s -webkit-user-select none -moz-user-select none -ms-user-select none user-select none background -webkit-linear-gradient(top white black) background linear-gradient(to bottom white black)

Testy

WWWSTREAMSOFTPL

Testy ndash mocha + chai

WWWSTREAMSOFTPL

import eb from EventBusES6describe(Component interactions Tests () =gt describe(EventBus Tests () =gt afterEach(() =gt eblistenersclear() ) it(should add listener () =gt given var currentSize = eblistenerssize when ebaddListener(listener) then expect(eblistenerssize)tobeeq(currentSize + 1) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt var sandbox beforeEach(function () sandbox = sinonsandboxcreate() ) afterEach(function () sandboxrestore() ) it(should invoke listener handler function () given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when ebfire(RowSelected eventData)

then expect(stub)tohavebeencalledOnce )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt it(should invoke listener handler function (done) given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when var promise= ebfire(RowSelected eventData)

then promisethen(()=gt expect(stub)tohavebeencalledOnce then(done done) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt ita(should invoke listener handler async () given var spy = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when await ebfire(RowSelected eventData)

then expect(spy)tohavebeencalledOnce

)

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

Testy ndash KarmaPhantomJS

WWWSTREAMSOFTPL

moduleexports = function (config) configset( files [ testjs ] frameworks [mocha chai] browsers [Chrome PhantomJS] plugins [ karma-chrome-launcher karma-mocha karma-chai ] junitReporter outputFile test_outunitxml suite unit )

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

casperstart(url)then(function() casperclick(buttonopen-dialog)

phantomcssscreenshot(the-dialog Dialog screenshot)

)casperthen(function now_check_the_screenshots()

phantomcsscompareAll())

Linty

WWWSTREAMSOFTPL

Isparta

NYC

Linty

reporters [ progress coverage ] coverageReporter type cobertura dir coveragewebpack module preLoaders [ ltlt add subject as webpacks preloader test (jsx)|(js)$ exclude this dirs from coverage exclude node_modules loader isparta-instrumenter-loader ] )

Linty

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Css ndash LessSaas

WWWSTREAMSOFTPL

import from-colors

class1 background-color color-base class2 background-color fff color lighten(color-base 10)

class1 background-color 2d5e8bclass1 class2 background-color fff color 1d4e7b

CssModules - Webpack

WWWSTREAMSOFTPL

import common

important tr td ampextend(optimistic) font-weight bold

global fancy background-color lightcyan

use strictimport template from templatehbsimport styles from TableCoponentless Created by Mirek on 2016-02-16 class TableComponent

renderTo(target) thistarget = target targethtml(template(styles))

ltdiv class=panel panel-defaultgt ltdiv class=panel-bodygt lttable class=table table-striped stylesimportant fancy table-hovergt lttrgt

TableComponentlessTableComponentes6

TableComponenthbs

ltdiv class=panel-bodygt lttable class=table table-striped TableCoponent__important___2NlR_ fancy table-hovergt

Css -autoprefixer

WWWSTREAMSOFTPL

example display flex transition all 5s user-select none background linear-gradient(to bottom white black)

example display -webkit-box display -webkit-flex display -ms-flexbox display flex -webkit-transition all 5s transition all 5s -webkit-user-select none -moz-user-select none -ms-user-select none user-select none background -webkit-linear-gradient(top white black) background linear-gradient(to bottom white black)

Testy

WWWSTREAMSOFTPL

Testy ndash mocha + chai

WWWSTREAMSOFTPL

import eb from EventBusES6describe(Component interactions Tests () =gt describe(EventBus Tests () =gt afterEach(() =gt eblistenersclear() ) it(should add listener () =gt given var currentSize = eblistenerssize when ebaddListener(listener) then expect(eblistenerssize)tobeeq(currentSize + 1) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt var sandbox beforeEach(function () sandbox = sinonsandboxcreate() ) afterEach(function () sandboxrestore() ) it(should invoke listener handler function () given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when ebfire(RowSelected eventData)

then expect(stub)tohavebeencalledOnce )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt it(should invoke listener handler function (done) given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when var promise= ebfire(RowSelected eventData)

then promisethen(()=gt expect(stub)tohavebeencalledOnce then(done done) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt ita(should invoke listener handler async () given var spy = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when await ebfire(RowSelected eventData)

then expect(spy)tohavebeencalledOnce

)

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

Testy ndash KarmaPhantomJS

WWWSTREAMSOFTPL

moduleexports = function (config) configset( files [ testjs ] frameworks [mocha chai] browsers [Chrome PhantomJS] plugins [ karma-chrome-launcher karma-mocha karma-chai ] junitReporter outputFile test_outunitxml suite unit )

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

casperstart(url)then(function() casperclick(buttonopen-dialog)

phantomcssscreenshot(the-dialog Dialog screenshot)

)casperthen(function now_check_the_screenshots()

phantomcsscompareAll())

Linty

WWWSTREAMSOFTPL

Isparta

NYC

Linty

reporters [ progress coverage ] coverageReporter type cobertura dir coveragewebpack module preLoaders [ ltlt add subject as webpacks preloader test (jsx)|(js)$ exclude this dirs from coverage exclude node_modules loader isparta-instrumenter-loader ] )

Linty

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

CssModules - Webpack

WWWSTREAMSOFTPL

import common

important tr td ampextend(optimistic) font-weight bold

global fancy background-color lightcyan

use strictimport template from templatehbsimport styles from TableCoponentless Created by Mirek on 2016-02-16 class TableComponent

renderTo(target) thistarget = target targethtml(template(styles))

ltdiv class=panel panel-defaultgt ltdiv class=panel-bodygt lttable class=table table-striped stylesimportant fancy table-hovergt lttrgt

TableComponentlessTableComponentes6

TableComponenthbs

ltdiv class=panel-bodygt lttable class=table table-striped TableCoponent__important___2NlR_ fancy table-hovergt

Css -autoprefixer

WWWSTREAMSOFTPL

example display flex transition all 5s user-select none background linear-gradient(to bottom white black)

example display -webkit-box display -webkit-flex display -ms-flexbox display flex -webkit-transition all 5s transition all 5s -webkit-user-select none -moz-user-select none -ms-user-select none user-select none background -webkit-linear-gradient(top white black) background linear-gradient(to bottom white black)

Testy

WWWSTREAMSOFTPL

Testy ndash mocha + chai

WWWSTREAMSOFTPL

import eb from EventBusES6describe(Component interactions Tests () =gt describe(EventBus Tests () =gt afterEach(() =gt eblistenersclear() ) it(should add listener () =gt given var currentSize = eblistenerssize when ebaddListener(listener) then expect(eblistenerssize)tobeeq(currentSize + 1) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt var sandbox beforeEach(function () sandbox = sinonsandboxcreate() ) afterEach(function () sandboxrestore() ) it(should invoke listener handler function () given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when ebfire(RowSelected eventData)

then expect(stub)tohavebeencalledOnce )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt it(should invoke listener handler function (done) given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when var promise= ebfire(RowSelected eventData)

then promisethen(()=gt expect(stub)tohavebeencalledOnce then(done done) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt ita(should invoke listener handler async () given var spy = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when await ebfire(RowSelected eventData)

then expect(spy)tohavebeencalledOnce

)

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

Testy ndash KarmaPhantomJS

WWWSTREAMSOFTPL

moduleexports = function (config) configset( files [ testjs ] frameworks [mocha chai] browsers [Chrome PhantomJS] plugins [ karma-chrome-launcher karma-mocha karma-chai ] junitReporter outputFile test_outunitxml suite unit )

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

casperstart(url)then(function() casperclick(buttonopen-dialog)

phantomcssscreenshot(the-dialog Dialog screenshot)

)casperthen(function now_check_the_screenshots()

phantomcsscompareAll())

Linty

WWWSTREAMSOFTPL

Isparta

NYC

Linty

reporters [ progress coverage ] coverageReporter type cobertura dir coveragewebpack module preLoaders [ ltlt add subject as webpacks preloader test (jsx)|(js)$ exclude this dirs from coverage exclude node_modules loader isparta-instrumenter-loader ] )

Linty

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Css -autoprefixer

WWWSTREAMSOFTPL

example display flex transition all 5s user-select none background linear-gradient(to bottom white black)

example display -webkit-box display -webkit-flex display -ms-flexbox display flex -webkit-transition all 5s transition all 5s -webkit-user-select none -moz-user-select none -ms-user-select none user-select none background -webkit-linear-gradient(top white black) background linear-gradient(to bottom white black)

Testy

WWWSTREAMSOFTPL

Testy ndash mocha + chai

WWWSTREAMSOFTPL

import eb from EventBusES6describe(Component interactions Tests () =gt describe(EventBus Tests () =gt afterEach(() =gt eblistenersclear() ) it(should add listener () =gt given var currentSize = eblistenerssize when ebaddListener(listener) then expect(eblistenerssize)tobeeq(currentSize + 1) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt var sandbox beforeEach(function () sandbox = sinonsandboxcreate() ) afterEach(function () sandboxrestore() ) it(should invoke listener handler function () given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when ebfire(RowSelected eventData)

then expect(stub)tohavebeencalledOnce )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt it(should invoke listener handler function (done) given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when var promise= ebfire(RowSelected eventData)

then promisethen(()=gt expect(stub)tohavebeencalledOnce then(done done) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt ita(should invoke listener handler async () given var spy = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when await ebfire(RowSelected eventData)

then expect(spy)tohavebeencalledOnce

)

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

Testy ndash KarmaPhantomJS

WWWSTREAMSOFTPL

moduleexports = function (config) configset( files [ testjs ] frameworks [mocha chai] browsers [Chrome PhantomJS] plugins [ karma-chrome-launcher karma-mocha karma-chai ] junitReporter outputFile test_outunitxml suite unit )

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

casperstart(url)then(function() casperclick(buttonopen-dialog)

phantomcssscreenshot(the-dialog Dialog screenshot)

)casperthen(function now_check_the_screenshots()

phantomcsscompareAll())

Linty

WWWSTREAMSOFTPL

Isparta

NYC

Linty

reporters [ progress coverage ] coverageReporter type cobertura dir coveragewebpack module preLoaders [ ltlt add subject as webpacks preloader test (jsx)|(js)$ exclude this dirs from coverage exclude node_modules loader isparta-instrumenter-loader ] )

Linty

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

Testy ndash mocha + chai

WWWSTREAMSOFTPL

import eb from EventBusES6describe(Component interactions Tests () =gt describe(EventBus Tests () =gt afterEach(() =gt eblistenersclear() ) it(should add listener () =gt given var currentSize = eblistenerssize when ebaddListener(listener) then expect(eblistenerssize)tobeeq(currentSize + 1) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt var sandbox beforeEach(function () sandbox = sinonsandboxcreate() ) afterEach(function () sandboxrestore() ) it(should invoke listener handler function () given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when ebfire(RowSelected eventData)

then expect(stub)tohavebeencalledOnce )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt it(should invoke listener handler function (done) given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when var promise= ebfire(RowSelected eventData)

then promisethen(()=gt expect(stub)tohavebeencalledOnce then(done done) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt ita(should invoke listener handler async () given var spy = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when await ebfire(RowSelected eventData)

then expect(spy)tohavebeencalledOnce

)

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

Testy ndash KarmaPhantomJS

WWWSTREAMSOFTPL

moduleexports = function (config) configset( files [ testjs ] frameworks [mocha chai] browsers [Chrome PhantomJS] plugins [ karma-chrome-launcher karma-mocha karma-chai ] junitReporter outputFile test_outunitxml suite unit )

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

casperstart(url)then(function() casperclick(buttonopen-dialog)

phantomcssscreenshot(the-dialog Dialog screenshot)

)casperthen(function now_check_the_screenshots()

phantomcsscompareAll())

Linty

WWWSTREAMSOFTPL

Isparta

NYC

Linty

reporters [ progress coverage ] coverageReporter type cobertura dir coveragewebpack module preLoaders [ ltlt add subject as webpacks preloader test (jsx)|(js)$ exclude this dirs from coverage exclude node_modules loader isparta-instrumenter-loader ] )

Linty

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Testy ndash mocha + chai

WWWSTREAMSOFTPL

import eb from EventBusES6describe(Component interactions Tests () =gt describe(EventBus Tests () =gt afterEach(() =gt eblistenersclear() ) it(should add listener () =gt given var currentSize = eblistenerssize when ebaddListener(listener) then expect(eblistenerssize)tobeeq(currentSize + 1) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt var sandbox beforeEach(function () sandbox = sinonsandboxcreate() ) afterEach(function () sandboxrestore() ) it(should invoke listener handler function () given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when ebfire(RowSelected eventData)

then expect(stub)tohavebeencalledOnce )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt it(should invoke listener handler function (done) given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when var promise= ebfire(RowSelected eventData)

then promisethen(()=gt expect(stub)tohavebeencalledOnce then(done done) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt ita(should invoke listener handler async () given var spy = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when await ebfire(RowSelected eventData)

then expect(spy)tohavebeencalledOnce

)

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

Testy ndash KarmaPhantomJS

WWWSTREAMSOFTPL

moduleexports = function (config) configset( files [ testjs ] frameworks [mocha chai] browsers [Chrome PhantomJS] plugins [ karma-chrome-launcher karma-mocha karma-chai ] junitReporter outputFile test_outunitxml suite unit )

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

casperstart(url)then(function() casperclick(buttonopen-dialog)

phantomcssscreenshot(the-dialog Dialog screenshot)

)casperthen(function now_check_the_screenshots()

phantomcsscompareAll())

Linty

WWWSTREAMSOFTPL

Isparta

NYC

Linty

reporters [ progress coverage ] coverageReporter type cobertura dir coveragewebpack module preLoaders [ ltlt add subject as webpacks preloader test (jsx)|(js)$ exclude this dirs from coverage exclude node_modules loader isparta-instrumenter-loader ] )

Linty

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt var sandbox beforeEach(function () sandbox = sinonsandboxcreate() ) afterEach(function () sandboxrestore() ) it(should invoke listener handler function () given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when ebfire(RowSelected eventData)

then expect(stub)tohavebeencalledOnce )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt it(should invoke listener handler function (done) given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when var promise= ebfire(RowSelected eventData)

then promisethen(()=gt expect(stub)tohavebeencalledOnce then(done done) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt ita(should invoke listener handler async () given var spy = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when await ebfire(RowSelected eventData)

then expect(spy)tohavebeencalledOnce

)

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

Testy ndash KarmaPhantomJS

WWWSTREAMSOFTPL

moduleexports = function (config) configset( files [ testjs ] frameworks [mocha chai] browsers [Chrome PhantomJS] plugins [ karma-chrome-launcher karma-mocha karma-chai ] junitReporter outputFile test_outunitxml suite unit )

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

casperstart(url)then(function() casperclick(buttonopen-dialog)

phantomcssscreenshot(the-dialog Dialog screenshot)

)casperthen(function now_check_the_screenshots()

phantomcsscompareAll())

Linty

WWWSTREAMSOFTPL

Isparta

NYC

Linty

reporters [ progress coverage ] coverageReporter type cobertura dir coveragewebpack module preLoaders [ ltlt add subject as webpacks preloader test (jsx)|(js)$ exclude this dirs from coverage exclude node_modules loader isparta-instrumenter-loader ] )

Linty

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt it(should invoke listener handler function (done) given var stub = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when var promise= ebfire(RowSelected eventData)

then promisethen(()=gt expect(stub)tohavebeencalledOnce then(done done) )

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt ita(should invoke listener handler async () given var spy = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when await ebfire(RowSelected eventData)

then expect(spy)tohavebeencalledOnce

)

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

Testy ndash KarmaPhantomJS

WWWSTREAMSOFTPL

moduleexports = function (config) configset( files [ testjs ] frameworks [mocha chai] browsers [Chrome PhantomJS] plugins [ karma-chrome-launcher karma-mocha karma-chai ] junitReporter outputFile test_outunitxml suite unit )

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

casperstart(url)then(function() casperclick(buttonopen-dialog)

phantomcssscreenshot(the-dialog Dialog screenshot)

)casperthen(function now_check_the_screenshots()

phantomcsscompareAll())

Linty

WWWSTREAMSOFTPL

Isparta

NYC

Linty

reporters [ progress coverage ] coverageReporter type cobertura dir coveragewebpack module preLoaders [ ltlt add subject as webpacks preloader test (jsx)|(js)$ exclude this dirs from coverage exclude node_modules loader isparta-instrumenter-loader ] )

Linty

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Testy ndash mocha + chai + sinon + sinon-chai

WWWSTREAMSOFTPL

describe(Component interactions Tests () =gt describe(EventBus Tests () =gt ita(should invoke listener handler async () given var spy = sandboxstub(listener handle) ebaddListener(listener) let eventData = id 1 when await ebfire(RowSelected eventData)

then expect(spy)tohavebeencalledOnce

)

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

Testy ndash KarmaPhantomJS

WWWSTREAMSOFTPL

moduleexports = function (config) configset( files [ testjs ] frameworks [mocha chai] browsers [Chrome PhantomJS] plugins [ karma-chrome-launcher karma-mocha karma-chai ] junitReporter outputFile test_outunitxml suite unit )

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

casperstart(url)then(function() casperclick(buttonopen-dialog)

phantomcssscreenshot(the-dialog Dialog screenshot)

)casperthen(function now_check_the_screenshots()

phantomcsscompareAll())

Linty

WWWSTREAMSOFTPL

Isparta

NYC

Linty

reporters [ progress coverage ] coverageReporter type cobertura dir coveragewebpack module preLoaders [ ltlt add subject as webpacks preloader test (jsx)|(js)$ exclude this dirs from coverage exclude node_modules loader isparta-instrumenter-loader ] )

Linty

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

Testy ndash KarmaPhantomJS

WWWSTREAMSOFTPL

moduleexports = function (config) configset( files [ testjs ] frameworks [mocha chai] browsers [Chrome PhantomJS] plugins [ karma-chrome-launcher karma-mocha karma-chai ] junitReporter outputFile test_outunitxml suite unit )

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

casperstart(url)then(function() casperclick(buttonopen-dialog)

phantomcssscreenshot(the-dialog Dialog screenshot)

)casperthen(function now_check_the_screenshots()

phantomcsscompareAll())

Linty

WWWSTREAMSOFTPL

Isparta

NYC

Linty

reporters [ progress coverage ] coverageReporter type cobertura dir coveragewebpack module preLoaders [ ltlt add subject as webpacks preloader test (jsx)|(js)$ exclude this dirs from coverage exclude node_modules loader isparta-instrumenter-loader ] )

Linty

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

Testy ndash KarmaPhantomJS

WWWSTREAMSOFTPL

moduleexports = function (config) configset( files [ testjs ] frameworks [mocha chai] browsers [Chrome PhantomJS] plugins [ karma-chrome-launcher karma-mocha karma-chai ] junitReporter outputFile test_outunitxml suite unit )

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

casperstart(url)then(function() casperclick(buttonopen-dialog)

phantomcssscreenshot(the-dialog Dialog screenshot)

)casperthen(function now_check_the_screenshots()

phantomcsscompareAll())

Linty

WWWSTREAMSOFTPL

Isparta

NYC

Linty

reporters [ progress coverage ] coverageReporter type cobertura dir coveragewebpack module preLoaders [ ltlt add subject as webpacks preloader test (jsx)|(js)$ exclude this dirs from coverage exclude node_modules loader isparta-instrumenter-loader ] )

Linty

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Testy ndash KarmaPhantomJS

WWWSTREAMSOFTPL

moduleexports = function (config) configset( files [ testjs ] frameworks [mocha chai] browsers [Chrome PhantomJS] plugins [ karma-chrome-launcher karma-mocha karma-chai ] junitReporter outputFile test_outunitxml suite unit )

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

casperstart(url)then(function() casperclick(buttonopen-dialog)

phantomcssscreenshot(the-dialog Dialog screenshot)

)casperthen(function now_check_the_screenshots()

phantomcsscompareAll())

Linty

WWWSTREAMSOFTPL

Isparta

NYC

Linty

reporters [ progress coverage ] coverageReporter type cobertura dir coveragewebpack module preLoaders [ ltlt add subject as webpacks preloader test (jsx)|(js)$ exclude this dirs from coverage exclude node_modules loader isparta-instrumenter-loader ] )

Linty

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

casperstart(url)then(function() casperclick(buttonopen-dialog)

phantomcssscreenshot(the-dialog Dialog screenshot)

)casperthen(function now_check_the_screenshots()

phantomcsscompareAll())

Linty

WWWSTREAMSOFTPL

Isparta

NYC

Linty

reporters [ progress coverage ] coverageReporter type cobertura dir coveragewebpack module preLoaders [ ltlt add subject as webpacks preloader test (jsx)|(js)$ exclude this dirs from coverage exclude node_modules loader isparta-instrumenter-loader ] )

Linty

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Testy

WWWSTREAMSOFTPL

casperstart(url)then(function() casperclick(buttonopen-dialog)

phantomcssscreenshot(the-dialog Dialog screenshot)

)casperthen(function now_check_the_screenshots()

phantomcsscompareAll())

Linty

WWWSTREAMSOFTPL

Isparta

NYC

Linty

reporters [ progress coverage ] coverageReporter type cobertura dir coveragewebpack module preLoaders [ ltlt add subject as webpacks preloader test (jsx)|(js)$ exclude this dirs from coverage exclude node_modules loader isparta-instrumenter-loader ] )

Linty

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Linty

WWWSTREAMSOFTPL

Isparta

NYC

Linty

reporters [ progress coverage ] coverageReporter type cobertura dir coveragewebpack module preLoaders [ ltlt add subject as webpacks preloader test (jsx)|(js)$ exclude this dirs from coverage exclude node_modules loader isparta-instrumenter-loader ] )

Linty

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Linty

reporters [ progress coverage ] coverageReporter type cobertura dir coveragewebpack module preLoaders [ ltlt add subject as webpacks preloader test (jsx)|(js)$ exclude this dirs from coverage exclude node_modules loader isparta-instrumenter-loader ] )

Linty

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Linty

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Narzędzia do budowania ndash Task Runners

WWWSTREAMSOFTPL

1 Sprawdź zmiany2 Kompiluj3 Sprawdź checkstyle4 Sprawdź findbug5 Puść testy51 Jak są błędy to pokaż dymek6 Odśwież przeglądarkę7

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Narzędzia do budowania

WWWSTREAMSOFTPL

watch css files [srccssscss] tasks [sassdev] js files [srcjsjs] tasks [uglifydev]

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Narzędzia do budowania

WWWSTREAMSOFTPL

gulpwatch(clienttemplatesjade) pipe(jade()) pipe(minify()) pipe(gulpdest(buildminified_templates))

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Narzędzia do budowania

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

var LayoutView = MarionetteLayoutViewextend( template require(templateslayout) regions main app-hook onShowBlogList function() thisshowChildView(main new BlogListView()) )

var Controller = MarionetteObjectextend( initialize function() var layout = new LayoutView() layoutrender() thisoptionslayout = layout

blogList function() var layout = thisgetOption(layout) layouttriggerMethod(showbloglist) )

var Router = MarionetteAppRouterextend( controller new Controller() appRoutes blog blogList blogentry blogEntry blogentrycommentscomment blogComment )

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

booksModuleconfig(function($routeProvider) $routeProviderwhen(books

templateUrl booksbook-listhtmlcontrollerAs BookListController

)when(booksid templateUrl booksbookhtmlcontrollerAs BookController

))

booksModulefactory(BookService [ $resource function($resource) return $resource(backendrestbooksid idid)

])

booksModulecontroller(BookListController function($scope BookService) thislist = BookServicequery()

thissearchBy = (query) =gt thislist = BookServicequery(query)

)

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

Isolated scope

Transclude

$digest already in progress

CompileFunctionLinkFunction

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

import Component from angular2core

import RouteParamsRouteData from angular2routerimport ROUTER_DIRECTIVES from angular2router

Component( selector about directives[ROUTER_DIRECTIVES] templateUrl componentsaboutabouthtml)export class About id string constructor(params RouteParams data RouteData) thisid = paramsget(id) consolelog(dataget(project))

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

Frameworks

WWWSTREAMSOFTPL

ltscript type=textx-handlebarsgt lth2gtArray Elementslth2gt each user in controllersusers ltligtuserltligt each ltscriptgt

ltscript type=textjavascriptgt App = EmberApplicationcreate()

AppApplicationController = EmberControllerextend( needs [users] )

AppUsersController = EmberArrayControllerextend( content [Mack Mona Manu] ) ltscriptgt

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component constructor(props) super(props) thisstate = counter 0

inc() thissetState(counter ++thisstatecounter)

dec() thissetState(counter --thisstatecounter)

render() return ( ltdivgt ltbutton onClick=thisincgt+ltbuttongt thisstatecounter ltbutton onClick=thisdecgt-ltbuttongt ltdivgt )

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

import React Component PropTypes from reactexport default class Counter extends Component

render() return ReactcreateElement( div null ReactcreateElement( button onClick thisincbind(this) + ) thisstatecounter ReactcreateElement( button onClick thisdecbind(this) - ) )

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

VirtualDOM

HierarchicalState

ISO MDA

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

FLUX

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

var React = require(react-native)var AppRegistry StyleSheet Text View = React

var SampleApp = ReactcreateClass( render function() return ( ltView style=stylescontainergt ltText style=styleswelcomegt Hello World ltTextgt ltTouchableHighlight onPress=this_onPressButtongt ltImage style=stylesbutton

source=require(imagemyButton) gt ltTouchableHighlightgt ltViewgt ) )

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

ReactNative

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

React

WWWSTREAMSOFTPL

WWWSTREAMSOFTPL

bdquoJavaScript Ninjardquo

pracastreamsoftpl

Zatrudniamy

WWWSTREAMSOFTPL

bdquoJavaScript Ninjardquopracastreamsoftpl

Dzięki za uwagę

Pytania

• Slajd 1
• Slajd 2
• Slajd 3
• Slajd 4
• Slajd 5
• Slajd 6
• Slajd 7
• Slajd 8
• Slajd 9
• Slajd 10
• Slajd 11
• Slajd 12
• Slajd 13
• Slajd 14
• Slajd 15
• Slajd 16
• Slajd 17
• Slajd 18
• Slajd 19
• Slajd 20
• Slajd 21
• Slajd 22
• Slajd 23
• Slajd 24
• Slajd 25
• Slajd 26
• Slajd 27
• Slajd 28
• Slajd 29
• Slajd 30
• Slajd 31
• Slajd 32
• Slajd 33
• Slajd 34
• Slajd 35
• Slajd 36
• Slajd 37
• Slajd 38
• Slajd 39
• Slajd 40
• Slajd 41
• Slajd 42
• Slajd 43
• Slajd 44
• Slajd 45
• Slajd 46
• Slajd 47
• Slajd 48
• Slajd 49
• Slajd 50
• Slajd 51
• Slajd 52
• Slajd 53
• Slajd 54
• Slajd 55
• Slajd 56
• Slajd 57
• Slajd 58
• Slajd 59
• Slajd 60

WWWSTREAMSOFTPL

bdquoJavaScript Ninjardquopracastreamsoftpl

Dzięki za uwagę

Pytania

• Slajd 1
• Slajd 2
• Slajd 3
• Slajd 4
• Slajd 5
• Slajd 6
• Slajd 7
• Slajd 8
• Slajd 9
• Slajd 10
• Slajd 11
• Slajd 12
• Slajd 13
• Slajd 14
• Slajd 15
• Slajd 16
• Slajd 17
• Slajd 18
• Slajd 19
• Slajd 20
• Slajd 21
• Slajd 22
• Slajd 23
• Slajd 24
• Slajd 25
• Slajd 26
• Slajd 27
• Slajd 28
• Slajd 29
• Slajd 30
• Slajd 31
• Slajd 32
• Slajd 33
• Slajd 34
• Slajd 35
• Slajd 36
• Slajd 37
• Slajd 38
• Slajd 39
• Slajd 40
• Slajd 41
• Slajd 42
• Slajd 43
• Slajd 44
• Slajd 45
• Slajd 46
• Slajd 47
• Slajd 48
• Slajd 49
• Slajd 50
• Slajd 51
• Slajd 52
• Slajd 53
• Slajd 54
• Slajd 55
• Slajd 56
• Slajd 57
• Slajd 58
• Slajd 59
• Slajd 60