Introducing the new React Nanodegree Program from Udacity

  • With the technology generating so much excitement, and so much opportunity emerging in the field, the timing is perfect to introduce Udacity’s newest offering: the React Nanodegree program!
  • If it seems unusual that Udacity should partner with a training organization to launch a Nanodegree program, React Training’s Tyler McGinnis has a succinct answer for why the union makes perfect sense:

    “React Training is really good at teaching React, and Udacity is really good at supporting students.”

  • When Tyler McGinnis highlights our ability to support students on their learning journeys, he is referring to features that are central to the Udacity learning experience, and which figure prominently in the structure of this new program, such as:

    Mentorship: Every enrolled student of the React Nanodegree program will have access to mentors in the Udacity classroom.

  • The unique partnership between React Training and Udacity offers students an opportunity that simply can’t be had elsewhere—the chance to learn React from the team that trains the world’s most successful companies, in a learning program focused on creating career opportunities for its students.
  • The new React Nanodegree program is one of the most efficient, economical, and effective ways to master the skills and gain the experience necessary to become a professional React developer.

Master the skills and gain the experience necessary to become a professional React developer with Udacity’s new React Nanodegree program. Enroll today!
Continue reading “Introducing the new React Nanodegree Program from Udacity”

Firekit concepts to sync Firebase and redux – Tarik Huber – Medium

Firekit concepts to sync Firebase and redux  #react #firebase #javascript #redux #reactjs

  • That is one of the main concepts firekit uses to manage the sync of the firebase realtime database and the redux store.
  • Firekit allows you to make your firebase reference with all the native firebase query and filtering functions and just send the resulting reference to firekit and it will listen to all changes and sync them to the redux store.Saving only simple jsonIf using instances of classes in your library you get into the situation to save to the redux store complicated objects and functions.
  • By saving only simple json in your redux store persistence can be done however you want and with every tool and concept you wish.Persistent listenersThe main reason I choose to create firekit is that all other libraries link the whole listening cycle to a single component.
  • You can leave the listening cycle in a component, page, application or any other level you want.This approach is the same no matter if you are listening to lists or simple paths in the firebase realtime database.ConclusionFirebase is made to make our developer lives easier.
  • The main goals are to give the user maximal flexibility for using firebase and just providing easy and simple tools to sync data to the redux store.I you are interested on how the library works or want to try a real world project visit the github repo with the source code or the demo page.If you like how this library works you could put a star on the github repo đ

Firekit is a library that helps you sync your Firebase realtime database with the redux store of your react application. It uses some new approaches witch we will try to present in this article. If…
Continue reading “Firekit concepts to sync Firebase and redux – Tarik Huber – Medium”

Introducing React Native Android Fragment – In The Hudl – Medium

  • So today we are announcing our first open source project for React Native at Hudl.React Native Android Fragment: Native Android Fragment does exactly what its name implies.
  • It helps to facilitate the development of a React Native application, for a pre-existing Android application that relies on the framework’s Fragment class.
  • It can be downloaded via jitpack and its versioning will attempt to always follow that of React Native’s major.minor versions.Our Android app originated around 2013 when Fragments were the Android standard and we’ve stuck with them ever since.
  • For anyone else that has tried to use React Native, you may also realize that support for Fragments is non-existent.
  • We hope this library, although small, may help others to get started quickly into the React Native ecosystem.

React Native Android Fragment does exactly what it’s name implies. It helps to facilitate the development of a React Native application, for a pre-existing Android application that relies on the frame
Continue reading “Introducing React Native Android Fragment – In The Hudl – Medium”

How to Scan Fingerprints with Async PHP and React Native — SitePoint

How to multi-factor authentication with Fingerprints scans, Async PHP and React Native

  • Our composer.json file could look something like:
    {
    “scripts”: {
    “dev”: “vendor/bin/aerys -d -c loader.php”,
    “prod”: “vendor/bin/aerys -c loader.php”
    },
    “require”: {
    “amphp/aerys”: “dev-amp_v2”,
    “pre/kitchen-sink”: “^0.1.0”
    },
    “autoload”: {
    “psr-4”: {
    “App\\”: “app”
    }
    },
    “config”: {
    “process-timeout”: 0
    },
    “minimum-stability”: “dev”,
    “prefer-stable”: true
    }

    This is from composer.json in the server project

    We can also set up a placeholder for requesting scans, along with an HTTP GET route to get to it:
    namespace App\Action;

    use Aerys\Request;
    use Aerys\Response;

    class ScanAction
    {
    public function __invoke(Request $request, Response $response)
    {
    $response-end(“requesting a scan…”);
    }
    }

    This is from app/Action/ScanAction.

  • pre in the server project

    use Aerys\Router;
    use App\Action\ScanAction;

    return (Router $router) = {
    $router-route(
    “GET”, “/scan”, new ScanAction
    );
    };

    This is from routes/web.

  • pre in the server project

    And we can start the server up with a server config file and pre-processor loader script:
    $port = 8080;

    $host = new $port);

    $host-use($router = Aerys\router());

    $web = process ‘http://127.0.0.1:{$port}’ | pbcopy”);

    This is from config.pre in the server project

    return Pre\processAndRequire(__DIR__ . “

  • Let’s add web sockets to our server:
    namespace App\Socket;

    use Aerys\Request;
    use Aerys\Response;
    use Aerys\Websocket;
    use Aerys\Websocket\Endpoint;
    use FingerprintSocket implements Websocket
    {
    private $endpoint;
    private $connections = [];

    public function onStart(Endpoint $endpoint)
    {
    $this-endpoint = $endpoint;
    }

    public function onHandshake(Request $request,
    Response $response)
    {
    // $origin = $request-getHeader(“origin”);
    //
    // if ($origin !

  • == “http://127.0.0.1:8080”) {
    // $response-setStatus(403);
    // $response-end(“origin not allowed”);
    // return null;
    // }

    $info = return $info[“client_addr”];
    }

    public function onOpen(int $clientId, $address)
    {
    $this-connections[$clientId] = $address;
    }

    public function onData(int $clientId, Message $message)
    {
    $body = yield $message;

    yield $this-endpoint-send(
    $payload, $clientId
    );
    }

    public function onClose(int $clientId,
    int $code, string $reason)
    {
    }

    public function onStop()
    {
    // nothing to see here…
    }
    }

    This is from in the server project

    use Aerys\Router;
    use App\Action\ScanAction;
    use (Router $router) = {
    $router-route(
    “GET”, “/scan”, new ScanAction
    );

    $router-route(
    “GET”, “/ws”, Aerys\websocket(new FingerprintSocket)
    );
    };

    This is from routes/web.

In this comprehensive and advanced tutorial, Chris shows us how to scan fingerprints with Async PHP and React Native. The future is here!
Continue reading “How to Scan Fingerprints with Async PHP and React Native — SitePoint”

Introducing Create React Native App

An easy way to get started with #reactnative without dealing with build dependencies #appdev

  • Today we’re announcing Create React Native App: a new tool that makes it significantly easier to get started with a React Native project!
  • With Create React Native App, there’s no need to use Xcode or Android Studio, and you can develop for your iOS device using Linux or Windows.
  • This is accomplished using the Expo app, which loads and runs CRNA projects written in pure JavaScript without compiling any native code.
  • Try creating a new project (replace with suitable yarn commands if you have it installed):

    This will start the React Native packager and print a QR code.

  • Create React Native App is now stable enough for general use, which means we’re very eager to hear about your experience using it!

Today we’re announcing Create React Native App: a new tool that makes it significantly easier to get started with a React Native project! It’s heavily inspired by the design of Create React App and is the product of a collaboration between Facebook and Expo (formerly Exponent).
Continue reading “Introducing Create React Native App”

Why Use React JS for Fast Interactive User Interfaces? — SitePoint

  • The Virtual DOM is at the core of what makes React fast at rendering user interface elements and their changes.
  • Each time there are changes to the underlying data in a React app, React creates a new Virtual DOM representation of the user interface.
  • This is where efficient diff algorithms, batching DOM read/write operations, and limiting DOM changes to the bare minimum necessary, make using React JS and its Virtual DOM a great choice for building performant apps.
  • Our First 50,000 Stars — Vjeux

    Although some would argue that all projects need React JS, I think it’s uncontroversial to say that React would be a great fit for web apps where you need to keep a complex, interactive UI in sync with frequent changes in the underlying data model.

  • Resources
    If you’re curious about how React JS and its Virtual DOM work, here’s where you can learn more:

    Conclusion
    React JS and other similar JavaScript libraries ease the development of snappy, event-driven user interfaces that are fast at responding to state changes.

Maria Antonietta Perna discusses what makes React JS a great fit for building fast UIs and introduces the concept of the Virtual DOM and how React uses it.
Continue reading “Why Use React JS for Fast Interactive User Interfaces? — SitePoint”

Experiments with High Performance Animation in React Native

Three major methods for shape animation with React Native via @salesforceeng

  • This story is my experience and experiments to achieve high performance animation in React Native.Along the way I learned tons from these blogs and recommend you read them as you dive deeper into building your own animations in React Native:React Native Animations Using Animated API from Nader DabitReact Native ART and D3 from Harry WolffBefore we continue, I would like to define what “high performance animation” in terms of my project.
  • Note: There is another OpenGL binding for React Native which enables a more flexible OpenGL implementation without the interface.Animation in React NativeIn my exploration I tested three major methods (with some variations) for doing shape animation with React Native.
  • For example, if we have a shape with a 1px border, it cannot be transformed to have a larger width/height and retain the same border width without redrawing.Experiments and ResultsRequest Animation Frame + JavaScript tweeningThe first approach is to change nothing but use the same code from the web implementation — meaning everything is done in JavaScript without any help from React Native.
  • The gaps between each country will also get scaled so the transformed shapes are not the same as the new shapes.Zoom animation with fade in/outThis method has a significant impact on the memory footprint since there are two views with a shadow node per shape.Animated + Hybrid Native Driver + Animated Shape (ART)For this approach I still used the Native Driver while I found there is a trick to communicate between the JS thread and UI thread using setNativeProps.
  • I first tried with React Native ART and switched to React Native SVG while both give similar results.Animated + Hybrid Native Driver + Animated Shape (OpenGL)After realizing the bottleneck comes from re-drawing shapes, I switched to another library which has the drawing logic implemented in OpenGL.

Archiving decent animation performance is quite tricky. This story is my experience and experiments to achieve high performance animation in React Native.
Continue reading “Experiments with High Performance Animation in React Native”