Upload
others
View
10
Download
0
Embed Size (px)
Citation preview
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
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)
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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 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)
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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 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)
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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 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)
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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 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)
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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 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)
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
Język -ECMAScript 6
WWWSTREAMSOFTPL
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)
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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)
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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)
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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)
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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)
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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)
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
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
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
ReactNative
WWWSTREAMSOFTPL
React
WWWSTREAMSOFTPL
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
React
WWWSTREAMSOFTPL
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquo
pracastreamsoftpl
Zatrudniamy
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania
WWWSTREAMSOFTPL
bdquoJavaScript Ninjardquopracastreamsoftpl
Dzięki za uwagę
Pytania