Charla sobre Developer Experience y librerías que la potencian como React y Webpack. StarTechConf 2015

1. Developer Experience
Nicolás Fernández
Ramírez
@elBuraBure BuraBure
© 2015
Invitados Especiales:
React y Webpack

2. UX: User Experience

6. JUGUEMOS
BUENA UX / MALA UX

15. DX:
¿ Developer Experience ?

16. React

17. ● Componentes Declarativos y
Reutilizables
● El estado de la app y su flujo es
explícito y único

21. ¡¿ HTML EN MI
JAVASCRIPT ?!

22. SEPARAR
PREOCUPACIONES
NO TECNOLOGIAS

23. el ESTADO de la UI

27. Top Level:
ReactDOM.render
ReactDOMServer.renderToString
Component:
setState
render
getDOMNode
propTypes
LifeCycle:
componentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount
API

28. ng
function
angular.bind
angular.bootstrap
angular.copy
angular.element
angular.equals
angular.extend
angular.forEach
angular.fromJson
angular.identity
angular.injector
angular.isArray
angular.isDate
angular.isDefined
angular.isElement
angular.isFunction
angular.isNumber
angular.isObject
angular.isString
angular.isUndefined
angular.lowercase
angular.merge
angular.module
angular.noop
angular.reloadWithDebugInfo
angular.toJson
angular.uppercase
directive
a
form
input
input[checkbox]
input[date]
input[datetime-local]
input[email]
input[month]
input[number]
input[radio]
input[text]
input[time]
input[url]
input[week]
ngApp
ngBind
ngBindHtml
ngBindTemplate
ngBlur
ngChange
ngChecked
ngClass
ngClassEven
ngClassOdd
ngClick
ngCloak
ngController
ngCopy
ngCsp
ngCut
ngDblclick
ngDisabled
ngFocus
ngForm
ngHide
ngHref
ngIf
ngInclude
ngInit
ngJq
ngKeydown
ngKeypress
ngKeyup
ngList
ngModel
ngModelOptions
ngMousedown
ngMouseenter
ngMouseleave
ngMousemove
ngMouseover
ngMouseup
ngNonBindable
ngOpen
ngOptions
ngPaste
ngPluralize
ngReadonly
ngRepeat
ngSelected
ngShow
ngSrc
ngSrcset
ngStyle
ngSubmit
ngSwitch
ngTransclude
ngValue
script
select
textarea
object
angular.version
type
$cacheFactory.Cache
$compile.directive.Attributes
$rootScope.Scope
angular.Module
form.FormController
ngModel.NgModelController
select.SelectController
provider
$anchorScrollProvider
$animateProvider
$compileProvider
$controllerProvider
$filterProvider
$httpProvider
$interpolateProvider
$locationProvider
$logProvider
$parseProvider
$rootScopeProvider
$sceDelegateProvider
$sceProvider
$templateRequestProvider
service
$anchorScroll
$animate
$animateCss
$cacheFactory
$compile
$controller
$document
$exceptionHandler
$filter
$http
$httpBackend
$httpParamSerializer
$httpParamSerializerJQLike
$interpolate
$interval
$locale
$location
$log
$parse
$q
$rootElement
$rootScope
$sce
$sceDelegate
$templateCache
$templateRequest
$timeout
$window
$xhrFactory
filter
currency
date
filter
json
limitTo
lowercase
number
orderBy
uppercase
auto
service
$injector
$provide
ngAnimate
service
$animate
$animateCss
ngAria
provider
$ariaProvider
service
$aria
ngCookies
service
$cookieStore
$cookies
provider
$cookiesProvider
ngMessageFormat
service
$$messageFormat
ngMessages
directive
ngMessage
ngMessageExp
ngMessages
ngMessagesInclude
ngMock
object
angular.mock
provider
$exceptionHandlerProvider
service
$controller
$exceptionHandler
$httpBackend
$interval
$log
$timeout
type
$rootScope.Scope
angular.mock.TzDate
function
angular.mock.dump
angular.mock.inject
angular.mock.module
ngMockE2E
service
$httpBackend
ngResource
service
$resource
ngRoute
directive
ngView
provider
$routeProvider
service
$route
$routeParams
ngSanitize
filter
linky
service
$sanitize
provider
$sanitizeProvider
ngTouch
directive
ngClick
ngSwipeLeft
ngSwipeRight
service
$swipe
API
librería
similar

29. ESCRIBAMOS JAVASCRIPT
NO <FRAMEWORK AQUÍ>

30. una cosa más...

32. Webpack

33. require(‘modulo’);
import modulo from ‘lib’;
CommonJS
ES2015
Webpack: Empaquetador de Módulos
elPaquete.js
Projecto Javascript

34. CÓDIGO
DEPENDENCIAS
LOADERS
PLUGINS
OUTPUT
BUNDLE

35. var json = require("./archivo.json");
// => retorna el contenido de archivo.json parseado
LOADERS
var csv = require('./data.csv');
// => retorna el contenido de data.csv parseado
var xml = require('./data.xml');
// => retorna el contenido de data.xml parseado
var base64 = require("base64!./archivo.txt");
// => contenido de data.txt como una string base64

36. var template = require("./template.handlebars");
// => el template como función lista para usar
var html = require("./README.md");
// => markdown compilado a HTML
var css = require("!raw!less!./styles.less");
// => estilos css compilados y sus dependencias
var messages = require("json!po!./en/messages.po");
// => json con las traducciones
var img = require("url?limit=10000!./file.png");
//=>Base64 si el archivo es menor a 10kb, si no url

37. {
...
module: {
loaders: [
...
{ test: /.handlebars$/, loader: "handlebars-loader" },
{ test: /.md$/, loader: "html!markdown" },
{ test: /.csv?$/, loader: 'dsv-loader' },
...
]
}
}
webpack.config.js
LOADERS

38. PLUGINS
plugins: [
new webpack.DefinePlugin({
VERSION: JSON.stringify("5fa3b9"),
DEBUG: true,
DEVELOPMENT: true,
"typeof window": JSON.stringify("object")
})
]
webpack.config.js
console.log("Running App version " + VERSION);
if(DEBUG) {
console.log('Debug info');
}
if(PRODUCTION) {
console.log('Production log');
}

39. PLUGINS
plugins: [
new I18nPlugin(translations: Object, fnName = "__": String)
]
webpack.config.js
// en un módulo
console.log(__("Hello World")); // <= traducción instantánea!
console.log(__("Missing Text")); // <= traducción instantánea!

40. CODE SPLITTING
{...}
{...}
{...}
{...}
{...} {...} {...} {...} {...} {...}
{...} {...} {...}
un módulo
=
un request
todos los
módulos
=
un request
varios
módulos
=
un request

41. [DEMO]

42. https://github.com/burabure/react-webpack-hot-boilerplate

43. Cast

44. http://BuraBure.com

45. livecoding.tv/BuraBure

46. Nicolás Fernández
Ramírez
@elBuraBure BuraBure
© 2015