Deep dive into observed Components with React.js and FrintJS

  • Higher-order componentThe API of the observe higher-order component (HoC) is quite simple:import React from ‘react’;import { observe } from ‘frint-react’;function MyComponent(props) { return div…/div;}const ObservedComponent = default ObservedComponent;It receives a function (that we called fn above), where you can generate your props that will be ultimately passed to your target…
  • Generating props synchronouslyThe fn function also gives you access to the FrintJS App’s instance:const ObservedComponent = observe(function (app) { // this will be the `props` in MyComponent return {}; })(MyComponent);Since you have access to your app instance, you can also get values from it, including providers:const ObservedComponent = observe(function (app)…
  • Because they have this dynamic nature, the observe HoC gives you access to parent props as an Observable:const ObservedComponent = observe(function (app, props$) { // …})(MyComponent);In addition to your FrintJS App instance (app), there is a second argument props$, which is props passed down to you from the parent Component…
  • But as your application grows, there will be times, when you need to work with multiple Observables and return a single props stream.This is where a helper function called streamProps shipped with frint-react can come handy.If you are an RxJS ninja, you may skip this part =DThe streamProps function will…
  • In that case, you may want to pass some default props to your target component before new values are generated.The streamProps helper function receives an optional first argument, where you can pass your default props:import { streamProps } from ‘frint-react’;const defaultProps = { foo: ‘n/a’, bar: ‘n/a’, baz: ‘n/a’,};const props$…

Our focus in this article will be about using the observe higher-order component, shipped from frint-react package. To make the most out of this, it is advised that you read these previous articles…
Continue reading “Deep dive into observed Components with React.js and FrintJS”

The Official Microsoft ASP.NET Site

React.js +  Core 2.0

  • The product(s) you are about to install leverage the Web Platform Installer (WebPI) for installation.
  • By downloading and using the Web Platform Installer (WebPI), you agree to the license terms and privacy statement for WebPI.
  • This installer will contact Microsoft over the Internet to retrieve product information.
  • WebPI uses the Microsoft Customer Experience Improvement Program (CEIP), which is turned on by default, see privacy statement for more information.
  • To view which software uses CEIP, see here.

Home of the Microsoft ASP.NET development community. Download Visual Studio, post to the forums, read ASP.NET blogs and learn about ASP.NET.
Continue reading “The Official Microsoft ASP.NET Site”

Rendering FrintJS Apps with React.js in the Browser and Server

Rendering FrintJS Apps with React.js in the Browser and Server

  • Rendering FrintJS Apps with React.js in the Browser and ServerI spent more time on this image than writing this post =DPreviously, I wrote about dependency injection and how providers are set up in FrintJS Apps.
  • Today, we will be using the same APIs and render a FrintJS App with React in the browser and server.Rendering with react-domIn the most basic and simple example, we can render a React component like this using ReactDOM:import React from ‘react’;import { render } from ‘react-dom’;function MyComponent() { return pHello…
  • /p;}const App = createApp({ name: ‘MyApp’, providers: [ { name: ‘component’, useValue: MyComponent, }, ],});It is by convention that we set the React component as a provider by giving it the name component.The same convention applies for our Vue.js, React Native, and Preact integrations too, as they can be found…
  • Only difference is that instead of receiving a Component as its first argument, it receives our App’s instance.What about server-side rendering?We have it covered already with our frint-react-server package:import { renderToString } from ‘frint-react-server’const App = createApp({ … });const app = new App();const html = renderToString(app);This also follows similar API…
  • Think of it similar to how Redux does it with their Provider / component and connect higher-order component.This gives developers a lot of flexibility when they need to access certain providers for example, without having to keep passing them as props everywhere.I will follow up by writing another post soon…

Previously, I wrote about dependency injection and how providers are set up in FrintJS Apps. Today, we will be using the same APIs and render a FrintJS App with React in the browser and server. We…
Continue reading “Rendering FrintJS Apps with React.js in the Browser and Server”

notifme/notifme-sdk: A Node.js library to send all kinds of transactional notifications.

  • A Node.js library to send all kinds of transactional notifications.
  • Multiple providers strategies — Want to use more than one provider?
  • Tools for local testing — Run a catcher locally to intercept all your notifications and display them in a web interface.
  • Congratulations, you should see the following lines in your console:

    Notification Catcher is a web interface for viewing and testing notifications during development.

  • Open http://localhost:1080 on your favorite browser, you should see the notification:

notifme-sdk – A Node.js library to send all kinds of transactional notifications.
Continue reading “notifme/notifme-sdk: A Node.js library to send all kinds of transactional notifications.”

Expo SDK v16.0.0 is now available – Exposition

Expo SDK v16.0.0 is now available  #react #reactnative #expo #reactjs

  • This release includes a lot of improvements so I’ll just get to it.Improvements to iOS Developer Tools in ExpoWe move away from the two-finger gesture to the standard React Native “rage shake” — you can use the old gesture by going to the Profile tab in Expo, then options.The Developer Menu and Expo Menu have been combined into one.Read more about this in the full post “Improvements to iOS Developer Tools in Expo”This opens the door for more improvements in the future, we’re really looking forward to it!React 16 alpha and peerDependenciesReact Native 0.43 depends on React 16 alpha.
  • Just give it an array of the keys your app cares about and it will copy their values from the old to the new store:import { LegacyAsyncStorage } from ‘expo’;// Before we read from or write to AsyncStorage, migrate them// Make sure this is inside of an async functionawait ‘item1’, ‘item2’, ‘item3’,]);If any of the items already have a value in the new store it will skip them so that it doesn’t overwrite new data.
  • Try it out in Native Component List, and read the API reference.ErrorRecoveryIf your app crashes in production with a fatal JS error, Expo will restart the app for you.
  • Respect orientation configuration correctly on iPads.Fix an issue with Universal Clipboard on iOS bothering you with alerts while using an Expo project.Add options screen on the profile tab on iOS, to pick which gesture you prefer to use to open the Expo Menu.Breaking changes in SDK v16.0.0If you use AsyncStorage on iOS you need to follow the steps described under “BREAKING: Scoped AsyncStorage on iOS” earlier in this document.Breaking changes in expo- validates options more strictly.
  • If you use this, read more in this commit.Upgrading your app to Expo SDK v16.0.0 from v15.0.0Close XDE or your exp CLI serverIn exp.json, change sdkVersion to “16.0.0”In package.json:- change react-native version to change expo version to “^16.0.0”- change react version to “16.0.0-alpha.6”- change @expo/ex-navigation version to “~2.10.0” (if you use it)- change jest-expo version to “~0.4.0” (if you use it)- delete your project’s node_modules directory and run npm installagain (or use yarn, we love yarn)Re-open XDE or exp and start your project once npm install from the previous step has completed.Update the Expo app on your phones from the App Store / Play Store.

Expo SDK 16.0.0 is based on the recently released React Native
0.43, “March”. This is a jump of 1 version of React Native; Expo
SDK 15.0.0 was based off of 0.42, “February”. React Native 0.43 depends…
Continue reading “Expo SDK v16.0.0 is now available – Exposition”

Building a new backend — Part 1 – lookapanda – Medium

Building a new backend — Part 1  #discord #webdevelopment #react #javascript #node #reactjs

  • Building a new backend — Part 1In this story I’d like to document my experiences in building a new backend.It represents my personal experiences and is not related to my profession as a Software Engineer.What is the backend for?This is a legitimate question, of course.
  • There is no real goal yet, I see it more like a personal challenge and practice.Some of my first pieces of code using LaravelI already built a backend quite some time ago already written in PHP using Laravel.
  • Times change quickly in a developers world and today I’m mostly programming in JavaScript (ES6, Node, etc.) and not that much in PHP anymore.Today (2017) I want to create something new again using the most modern technologies I can find.
  • REST APIs access information after all and said information needs to be stored somewhere.With my PHP API I was using MySQL (or actually MariaDB) and with my Node API it was MongoDB.
  • It should be easy to use but also powerful.In my next blog post I will share my first experiences in using Cassandra for building the database and probably also my decission for the framework I’ll be using.If you’ve come so far to read this very line, I want to say thank you.

In this story I’d like to document my experiences in building a new backend.
It represents my personal experiences and is not related to my profession as a Software Engineer. This is a legitimate…
Continue reading “Building a new backend — Part 1 – lookapanda – Medium”

Why Vue 2 beats Angular 2 and React – Jon Paul Miles – Medium

  • For any new web app, I will almost recommend Vue 2 over React or Angular 2.
  • Besides that Angular 2 took me about a week to find my way around instead of React’s 2 days and I’m coming from a strong experience with Angular 1.
  • It took about 2 days to find my way around.
  • Coming from an angular 1 background I felt comfortable with Vue in one afternoon.
  • Never miss a story from Jon Paul Miles , when you sign up for Medium.

We started a contest at my job to see which framework was the best. At first it was going to be Angular 2 vs React, but then a friend mentioned that people who used Vue wished they had known about it…
Continue reading “Why Vue 2 beats Angular 2 and React – Jon Paul Miles – Medium”