slorber

Intro

This pattern is for those of you that maintain multiple applications and need to build components that can be reused across all these apps. It won’t be useful if you build components meant to be reused in the same application.

Your typical app structure

If you use smart/dumb, or container/presentational components, which you should if you want your components to be at least a little reusable, your typical application might look like this:

slorber

// FP languages permit to evaluate if/else expressions as values.
// In many cases it permits to avoid using mutable variables (var/let), multiple returns, or nested ternary operators

// This is the do { } notation (stage 0), that permits to write the following right now with Babel.

const Users = ({users}) =>   (
  <div>
    {users.map(user =>
      <UserCard key={user.id} user={user}/>

slorber

const myProgram = [
  { 
    op: "transform_list_elements", 
    transformation:  { op: "multiply" : multiplier: 2 }
  },
  { 
    op: "transform_list_elements", 
    transformation:  { op: "add" : value: 1 }
  }

slorber

"use strict";

var MobilePushRepository = require("repositories/mobilePushRepository");
var AppEvents = require("appEvents");
var AppHistory = require('appHistory');

var pushNotificationPluginSingleton = undefined;
function pushPlugin() {
    if ( typeof cordova === "undefined" ) {
        throw new Error("This can only be used in a Cordova app context");

slorber

"use strict";

var _ = require('lodash');
var $ = require("jquery");
var React = require("react");
var ReactDOM = require("react-dom");


/*
 This component is technical only.

slorber

<?xml version='1.0' encoding='utf-8'?>
<widget id="co.stample" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:gap="http://phonegap.com/ns/1.0">
    <name>Stample</name>
    <description>
        Your Knowledge Network
    </description>
    <author email="[email protected]" href="https://stample.co">
        Stample
    </author>

slorber

pushnotification.title=Stample
pushnotification.relationship.created={0} souhaite vous ajouter à ses contacts
pushnotification.relationship.accepted={0} a accepté votre demande de contact
pushnotification.addedToLibraryMembers={0} a partagé la bibliothèque {1} avec vous
pushnotification.addedToGroupMembers={0} vous a ajouté à l''équipe {1}
pushnotification.stample.liked={0} a aimé votre stample {1} dans {2}
pushnotification.stample.commented={0} a commenté {1}
pushnotification.stample.mentionned={0} vous a mentionné dans un commentaire sur le stample {1}
pushnotification.stample.created={0} a ajouté un stample dans votre bibliothèque {1}
pushnotification.library.followed={0} à suivi votre bibliothèque publique {1}

slorber

    /**
     * Return the users that should receive a push after a Stample gets moved from one place to the other
     * @param movedStample the Stample that just got moved
     * @param movedBy the user that performed the move operation
     * @param from the former library/folder in which the folder was
     * @return the list of users to send a push message to
     */
    private def getUsersReceivingStampleMovePush(movedStample: Stample,movedBy: User,from: FolderLike): List[User] = {
      val formerLibrary = libraryService.getLibrary(from)
      val newLibrary = libraryService.getLibrary(movedStample)

slorber

"use strict";



// If you want to use CodePush for development
// Maybe it can be worth being able to inject your own key here with Webpack's DefinePlugin
const DeveloperOptions = {
  // deploymentKey: "PUT_YOUR_KEY"
};

slorber

////////////////////////////////////////////////////////////////////////
// Intro
///////////////////////

// Tools like Redux-saga, React-redux and Reselect can easily be used without Redux
// For Reselet there's nothing to do, it's just not coupled to Redux
// For the others, you just need to provide an adapter

// At Stample.co we use a legacy framework that is quite close to Redux but with a bad API
// We want to progressively migrate to Redux, so starting now to use Redux tools on new features will make our migration faster