React Native — одного JS мало

На видео выше — летает, если сравнивать с поделкой на Meteor-е. Второй проект PhoneGap на Phaser — уже лучше. Хотя там только HTML5-canvas, а все равно лаги. Crosswalk обещал помочь, но я этого уже не дождался.

React Native — одного JS мало

А что творилось с PhoneGap на iOS в мою бытность полтора года назад — это не передать литературными словами. Тогда и родилась мечта освоить React Native.

React Native — одного JS мало

Мопед не мой.

React Native — одного JS мало

Redux — это архитектура приложения. Хотя камрады на Clojure со мной не согласны. У них свои велосипеды.

React Native — одного JS мало

По опыту, каких компонентов не хватает? Автор доклада уверяет, что уже можно найти все, что угодно.

React Native — одного JS мало

Буквально вчера искал, как React-приложении выполнить переход между страницами, ничего лучше, чем router.push() пока не нашел. Пример. Надеюсь, что плохо искал.

React Native — одного JS мало

А как бы побыстрее собирать проект на этапе разработки под Android? На IntelXDK сборка проекта PhoneGap выполнялась шустро, если не путаю. Судя по видео в конце доклада, для Mac-а тоже Simulator готов к изменениям кода практически в реальном времени. А в Android Studio наблюдаю задержку 20 сек.

Современный JavaScript или как сделать ваш Redux-модуль готовым к переиспользованию

Спасибо за ducks, теперь вообще замечательно!

import { createAction, createReducer } from 'redux-act'

export const actions = {
  inputTitle: createAction('@@edit_post/INPUT_TITLE', title => ({ title })),
  submit: createAction('@@edit_post/SUBMIT', post => post),
}

const initialState = {
  flow: '',
  title: '',
  content: ''
}

const reducer = createReducer({
  [actions.inputTitle]: (state, { title }) => ({...state, title}),
  [actions.submit]: (state, post) => ({...state, ...post})
}, initialState)

export default reducer

Как слямзить Хабр по-быстрому

Но! Этот способ плох для передачи props в PureComponent, onClick={ga(...)} при каждом рендеринге будет возвращать новую функцию. Для понимания вопроса — видео.

Как слямзить Хабр по-быстрому

Изменил структуру папок: вместо раздельных actions и reducers, объединил попарно файлы в папке ducks. Мы согласились на HTML внутри JS, зачем же бегать за экшенами и редюсерами по разным файлам?

ducks/editPost.js

import { createAction, createReducer } from 'redux-act'

export const actions = {
  inputTitle: createAction('@@edit_post/INPUT_TITLE', title => ({ title })),
  submit: createAction('@@edit_post/SUBMIT', post => post),
}

const initialState = {
  flow: '',
  title: '',
  content: ''
}

const reducer = createReducer({
  [actions.inputTitle]: (state, { title }) => ({...state, title}),
  [actions.submit]: (state, post) => ({...state, ...post})
}, initialState)

export default reducer

На мой вкус — замечательно!

Современный JavaScript или как сделать ваш Redux-модуль готовым к переиспользованию

Красивый способ избавиться от switch:

import { createAction } from 'redux-act'

export const inputTitle = createAction('@@edit_post/INPUT_TITLE', title => ({ title }))
export const submit = createAction('@@edit_post/SUBMIT', post => post)

import { createReducer } from 'redux-act'
import * as EditPostActions from '../actions/EditPostActions'

const initialState = {
  flow: '',
  title: '',
  content: ''
}

const reducer = createReducer({
  [EditPostActions.inputTitle]: (state, { title }) => ({...state, title}),
  [EditPostActions.submit]: (state, post) => ({...state, ...post})
}, initialState)

export default reducer

Современный JavaScript или как сделать ваш Redux-модуль готовым к переиспользованию

Прочитал с листа код из примера, а из статьи смог вынести полезного про уникальность возвращаемых значений символов.

Поставьте себя на место тех, кто будет на поддержке кода. Пожалуйста!

Разбор: как и зачем применять PureComponent в React

На практике воткнуться проще!

Промисы на примере бургер-вечеринки

Например обращение к внешнему API, когда присутствует задержка ответа.

Создание картинок на CSS делает верстальщика лучше, или Чем себя занять долгими зимними вечерами

Моё 1 декабря 2015

Будва, Черногория

Создание картинок на CSS делает верстальщика лучше, или Чем себя занять долгими зимними вечерами

Это смотря где обитать! :)

Промисы на примере бургер-вечеринки

Следующая прекрасная статья для дальнейшего погружения в промисы (но и она освещает не все вопросы).

Как слямзить Хабр по-быстрому

// в этом месте:

export const ga = (eventCategory, eventAction, eventLabel) => {
  if (typeof window.ga === 'function') {
    window.ga('send', 'event', eventCategory, eventAction, eventLabel)
  }
}

// добавил замыкание:

export const ga = (eventCategory, eventAction, eventLabel) => () => {
  if (typeof window.ga === 'function') {
    window.ga('send', 'event', eventCategory, eventAction, eventLabel)
  }
}

// теперь вместо похабного:

<a ... onClick={ga.bind(void 0, 'footer', 'links', 'ios_app')} >

// несравненная красота:

<a ... onClick={ga('footer', 'links', 'ios_app')} >

Как слямзить Хабр по-быстрому

Ваш коммент больше, чем моя статья. Спасибо за аргументы.

Как слямзить Хабр по-быстрому

Только если оставить в кавычках.