Advertisement
"Frameworks in 2015" Андрей Листочкин
Apr. 28, 2015•0 likes•1,116 views
2 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Technology
Hey, let's talk about the future! Frameworks are moving fast, delivering new features, improving performance, and expanding the boundaries of what's possible to do with the web today. Sometimes it's hard to keep up. We'll talk about what the future holds for all of us and how to write your applications today to be prepared for it.
FwdaysFollow
FwdaysAdvertisement
Advertisement
Advertisement
Recommended
Gotta Persist 'Em All: Realm as Replacement for SQLiteSiena Aguayo
React introductionKashyap Parmar
Dynamic input tables lwc vs aura vs. visualforceMike Tetlow
Railsconf 2017 - React & React Native a common codebase across native and webtalkingquickly
Serverless ArchitecturesLynn Langit
DevOps in the era of serverless computing - Alessandro Vozza - Codemotion Ams...Codemotion
"Frameworks in 2015" Андрей Листочкин
- Frameworks in 2015 Andrey Listochkin @listochkin github.com/listochkin github.com/dev-ua
- Frameworks in 2015
- @listochkin frontendua.im
- 2015
- Angular Ember React
- MVC
- MV*
- *V*
- ***
- Architecture
- BIG Apps
- GMail ~2007 800k
- Your App Today ~1.5m
- Frameworks Matter
- bootstrap server DOM data 3rd-party ...
- Write It By Hand
- Ecosystems
- Ember Ember Data Ember CLI Ember Inspector Ember Deploy LiquidFire EmberFire Ember Paper
- Ember vs React
- Ember Ecosystem vs React Ecosystem
- Missing Piece?
- Abandon
- Wait
- Implement
- and Share
- Dynamics of Ecosystems
- Dynamics of Open Source
- Done == Dead
- jQuery
- Backbone
- It Works!
- All Bugs Fixed
- No one wants it :(
- Reinvent
- Refactor
- Bikeshed
- Change!
- Abandon
- Batman JS Spine Knockout Can JS Durandal JavaScript MVC
- Wait
- Ember FastBoot
- Angular 2
- Mixins in React
- Implement
- Builds
- Ember CLI
- Grunt vs Gulp Browserify vs Webpack Test’em vs Karma Selenium vs Protractor
- and Share
- Gold Rush
- Young Ecosystems
- React Flux
- 493 results for 'flux' https://www.npmjs.com/search?q=flux
- We've found 1,276 repository results https://github.com/search? q=flux&l=JavaScript&type=Repositorie s
- Facebook Flux Reflux Fluxxor Fluxible by Yahoo Alt Flummox Marty.js McFly Lux Fynx Fluxy
- Rivalry
- AngularStrap vs UI Bootstrap
- Unification
- Ember CLI Deploy
- 3 projects
- merged into one
- 6 core contributors
- 925 packages http://www.emberaddons.com/
- Open Source is HARD
- Github stars Green Badges Great Docs Big Early Adopters API compatibility Issues Triaging
- Dynamics
- forced to change
- missing pieces
- great artists steal Steve Jobs Pablo Picasso Igor Stravinsky William Faulkner T. S. Eliot W. H. Davenport Adams
- common future
- Predict to Future-proof
- framework-agnostic architecture
- since summer 2013
- architecture = decisions
- code
- tools
- dependencies
- code
- spacial
- components
- YUI 2007
- Widgets
- Angular Directive 2009
- custom elements
- Twitter Flight January 31, 2013
- Modern Components
- data down events up
- React sans vDOM
- Polymer May 16, 2013
- <stock-badge ticket=”msft” range=”yoy” chart=”linear”>
- React May 29, 2013
- Ember 1.0 rc8 Aug 29, 2013
- Ember Components
- Rethinking Best Practices video Oct 30, 2013
- components
- dumb vs smart
- dumb UI-only No dependencies No domain state
- dumb is good
- double wrap
- smart wraps dumb
- higher-order components
- Route-driven Views
- Nested UI
- global UI state vs local UI state
- Router.map -> @route 'talk/new', path: 'talks/new' @route 'schedule', { path: 'talks' }, -> @route 'talk', path: ':talk_id'
- Router.map -> @route 'talk/new', path: 'talks/new' @route 'schedule', { path: 'talks' }, -> @route 'talk', path: ':talk_id'
- Router.map -> @route 'talk/new', path: 'talks/new' @route 'schedule', { path: 'talks' }, -> @route 'talk', path: ':talk_id'
- Router.map -> @route 'talk/new', path: 'talks/new' @route 'schedule', { path: 'talks' }, -> @route 'talk', path: ':talk_id'
- {{outlet}}
- components = tags
- outlets = iframes
- shallow hierarchies
- UI-only components
- livereloadability
- share
- Router + Components
- Route Handler loads data handles actions
- Component shows DOM DOM events => actions manages children
- Router + Components
- got a form? write a component! even when you don’t reuse
- Ember
- controllers views components++
- Angular
- smallest controllers possible
- directives++
- angular 1.4 router UI router
- React
- react-router
- depth
- MVC
- “easy”
- Backbone
- Models Sync Data binding
- better
- Identity
- Unidirectional Data flow
- immutability+FP
- CQRS
- Operation Transforms
- Offline Mode
- distributed systems
- Battlefield
- flux
- flux in any framework
- Monadic Data Dependencies Declaration
- GraphQL
- Write-Only DOM
- Ember Glimmer
- JSX as a Data Structure
- future
- ES6
- ES.Next + addons
- @Decorators async type annotations JSX
- @Stateful({ initialize (props) { return { count: 0 }; }, reducers: { increment (props, state) { return { count: state.count + 1 }; } } }) class Counter { static propTypes = { count: PropTypes.number.isRequired, increment: PropTypes.func.isRequired }; render () { const { count, increment } = this.props; return ( <button onClick={increment}> Pressed {count} times. </button> ) } }
- class MyComponent extends HTMLElement { ... }
- Aurelia Angular 2.0 React Ember
- tools
- Ember CLI
- Build Test Runner Dependencies Dev Server Generators Addons
- generators
- tool enforces conventions
- Angular React
- React Hot Loader
- live reload++
- Ember Inspector
- Render Tree Routing Data Explorer DI Container Deprecations Promises Performance
- Chrome Firefox IE Safari
- dependencies
- ember install:addon liquid-fire
- component library build step tool ...
- testing
- UI tests
- visit('talks/new'); fillIn('input.title', 'My Cool Talk'); click('button.submit'); andThen(() => { equal( find('ul.talks li:last').text(), 'My Cool Talk'); });
- Selenium
- “Native”
- pluggable renderers
- jQuery vs Zepto
- DOM vs Cocoa, QT
- Native UI JS for App and Network
- Rolling Releases
- challenges
- Angular 2 React Ember Router y y y Components y y y ES.next y y y vDOM w y w FP+immutable n w w monadic declarations n w n Data n w y Asset Pipeline n n y Addons n n y UI testing n n y Browser Tools n n y Hot Reload n y n Isomorphic w y w Native n y n Rolling Releases n n y
- Ember Productivity
- React Innovation
- Angular Popularity
- you don’t have to be productive, innovative, or popular to be successful
- @listochkin frontendua.im
Advertisement