JavaScript ES 2017: Learn Async/Await by Example – codeburst

  • Consider the below code:function doubleAfter2Seconds(x) { return new Promise(resolve = { setTimeout(() = { resolve(x * 2); }, 2000); });}In this code we have a function called doubleAfter2Seconds.
  • Here’s what the boilerplate code looks like:function addPromise(x){ return new Promise(resolve = { // Code goes here… // resolve() });}Awesome.
  • In this example we should be returning x + 2*a + 2*b + 2*c. Here’s the code:function addPromise(x){ return new Promise(resolve = { = { = { = { resolve(x + a + b + c); }) }) }) });}Lets walk through the code again, line by line.First, we create…
  • Here’s what that looks like:async function addAsync(x) { // code here…}Now that you’ve created an async function, we can make use of the await keyword which will pause our code until the Promise has resolved.
  • Here’s how easy that is:async function addAsync(x) { const a = await doubleAfter2Seconds(10); const b = await doubleAfter2Seconds(20); const c = await doubleAfter2Seconds(30); return x + a + b + c;}And here’s the full code:As you can see, we’re still making use of the same doubleAfter2Seconds function.

ES 2017 introduced Asynchronous functions. Async functions are essentially a cleaner way to work with asynchronous code in JavaScript. In order to understand exactly what these are, and how they work…
Continue reading “JavaScript ES 2017: Learn Async/Await by Example – codeburst”

React Alicante 2017 #ReactAlicante #React.js #JavaScript

React Alicante 2017 #ReactAlicante #React.js #JavaScript

  • With an attendance of over 250 and a wide range of the latest and greatest from the React world, React Alicante delivered some interesting topics ranging from React Native all the way to GraphQL.
  • While I really do see the value in documenting your React components for large scale projects I can also see its value being diminished somewhat for smaller scale projects as the time spent building a system of UI documentation with Storybook while also having to write tests specifically for that…
  • Possibly one the most interesting talks at the conference was by Nikolas Burk, His talk (Building a realtime chat app with GraphQL) was extremely engaging.
  • A talk by Erik Rasmussen labelled A practical guide to Redux Form was very interesting and made me rethink my current system of form validation using React and Redux.
  • Erik is the creator of Redux Form and he outlined how this library provides an easier way to manage the various state changes of a dynamic form.

Last weekend I attended React Alicante. Its the first of its type set in Spain’s southeastern Costa Blanca. It delivered some interesting topics ranging from
Continue reading “React Alicante 2017 #ReactAlicante #React.js #JavaScript”

Let There Be Peace On CSS // Speaker Deck

  • In the last few months there’s been a growing friction between those who see CSS as an untouchable layer in the “separation of concerns” paradigm, and those who have simply ignored this golden rule and found different ways to style the UI, typically applying CSS styles via JavaScript.
  • This talk will be my attempt to bring peace between the two fronts, help these two opposite factions to understand and listen to each other, see the counterpart’s points of views, find the good things they have in common, and learn something from that.
  • ## This talk has been presented at London CSS Meetup + Design Exchange Nottingham (DXN).

In the last few months there’s been a growing friction between those who see CSS as an untouchable layer in the “separation of concerns” paradigm, and those who have simply ignored this golden rule and found different ways to style the UI, typically applying CSS styles via JavaScript.
Continue reading “Let There Be Peace On CSS // Speaker Deck”

Front end architecture – João Paulo Lethier – Medium

Front end architecture  #javascript #frontenddevelopment #react #reactjs #reactjs

  • So, almost every project I worked use MVC architecture, and when I started to work in some front end projects, using angular or react, I tend to structure my project’s folders and files thinking in MVC, using the same structure I would use in a backend project using RubyOnRails.Taking advantage that in my job team, at SumOne, we decided to organize some talks, I choose to do a talk about front end architecture so this would be an opportunity to learn.
  • Besides the type based folder structure, that is similar to MVC structure folders and what I was used to, I found that most front end developers recommend a feature based folder structure to organize project’s code files.So, I did a small presentation and develop a sample project on github to show how a react project would like on each kind of folder structure: type based, feature based and mix based.
  • For example, if you have a list feature, you would have the API file that make the request call to get items to list, action file that call API and return the answer to view and view file itself on the same folder.Lastly, you can use a mix based folder structure, organizing by feature first, and inside of each feature folder.
  • This structure makes easy to find all code related to a feature, for example, if we have a search feature and want to change the api request for the search form, I just have to search for the api file on search feature folder.
  • Following this mix based structure, if you have a large feature, that has a lot of code files, more than one api call, for example, you can organize files by type(API, Services, Actions, Views, Styles, …) inside the feature folder.

I am a developer since 2010, but only recently I started to work a little more with front end frameworks. I’ve worked a lot more with backend development, I have a lot more experience creating and…
Continue reading “Front end architecture – João Paulo Lethier – Medium”

ReactXP — First Look🔥 – React Native Training – Medium

.@Microsoft's ReactXP : the first look  #ReactJS

  • is a new Library by Microsoft for building cross platform apps that run on iOS, Android, Windows, and the web.This library looks really promising, and I will quickly demo the library as well as talk about what it offers.ReactXP is built using React and React Native, and the lifecycle methods remain the same across both platforms.
  • The main difference between React Native is that ReactXP works out of the box with not only iOS and Android, but also on the web and on WindowsOS!From the docs:With React and React Native, your web app can share most its logic with your iOS and Android apps, but the view layer needs to be implemented separately for each platform.
  • If you write your app to this abstraction, you can share your view definitions, styles and animations across multiple target platforms.ReactXP main points:Recommended to build using TypeScript or FlowCan compile directly to web without another abstraction 🔥🔥🔥If you already know React / React Native, you get get up and running quicklyVery similar API to React Native.
  • Below are examples of some code you may see in ReactXPimport RX = require(‘reactxp’)import { Styles, Component, Animated, Types, View, Link, Text,} from ‘reactxp’const styles = { container: Styles.createViewStyle({ flex: 1, justifyContent: ‘center’ backgroundColor: ‘#f5fcff’ })}class App extends Componentnull, null { private _animatedStyle: componentDidMount() { // do some stuff with the _animatedStyle }render() { return( View style={ styles.container } Animated.Text style={this.
  • _animatedStyle} Hello World /Animated.Text /View ) } }export default Appprops, state, and most React specific things work the same, because it is built on top of React and React Native.Huge props to Microsoft + Open Source and all of the great people working there, they have been absolutely crushing it lately and I am excited to see where ReactXP goes from here!If you’re looking to get started with a new ReactXP project, check out this starter project I created that you can easily clone to get set up – Name is Nader Dabit .

ReactXP is a new Library by Microsoft for building cross platform apps that run on iOS, Android, Windows, and the web. This library looks really promising, and I will quickly demo the library as well…
Continue reading “ReactXP — First Look🔥 – React Native Training – Medium”

Creating a Plugin System and Preact in Pictures

  • Preact is an implementation of the React API that’s significantly smaller and faster.
  • If you’ve ever wondered how the virtual dom and component model really work, this will be a great introduction that should prepare you for reading the source code of Preact or React.
  • After hearing this talk, you’ll have a great new tool for developing performance-critical UIs and a better mental model of how React works on the inside.
  • Creating a Plugin System with Apollo and the Coral Project by Riley Davis

    The Coral Project attempts to rethink how we create community online with open source tools and best practices.

  • This talk is about how we enabled development of third-party plugins with Apollo and GraphQL to help publishers adapt our commenting platform to meet their needs.

Come downtown for food, drink, talks, and socializing. We’ll be talking about ReactJS and related technologies. There is a lightrail stop at the corner of
Continue reading “Creating a Plugin System and Preact in Pictures”

ReactXP — First Look🔥 – Nader Dabit – Medium

  • is a new Library by Microsoft for building cross platform apps that run on iOS, Android, Windows, and the web.This library looks really promising, and I will quickly demo the library as well as talk about what it offers.ReactXP is built using React and React Native, and the lifecycle methods remain the same across both platforms.
  • The main difference between React Native is that ReactXP works out of the box with not only iOS and Android, but also on the web and on WindowsOS!From the docs:With React and React Native, your web app can share most its logic with your iOS and Android apps, but the view layer needs to be implemented separately for each platform.
  • If you write your app to this abstraction, you can share your view definitions, styles and animations across multiple target platforms.ReactXP main points:Recommended to build using TypeScript or FlowCan compile directly to web without another abstraction 🔥🔥🔥If you already know React / React Native, you get get up and running quicklyVery similar API to React Native.
  • Below are examples of some code you may see in ReactXPimport RX = require(‘reactxp’)import { Styles, Component, Animated, Types, View, Link, Text,} from ‘reactxp’const styles = { container: Styles.createViewStyle({ flex: 1, justifyContent: ‘center’ backgroundColor: ‘#f5fcff’ })}class App extends Componentnull, null { private _animatedStyle: componentDidMount() { // do some stuff with the _animatedStyle }render() { return( View style={ styles.container } Animated.Text style={this.
  • _animatedStyle} Hello World /Animated.Text /View ) } }export default Appprops, state, and most React specific things work the same, because it is built on top of React and React Native.Huge props to Microsoft + Open Source and all of the great people working there, they have been absolutely crushing it lately and I am excited to see where ReactXP goes from here!

ReactXP is a new Library by Microsoft for building cross platform apps that run on iOS, Android, Windows, and the web. This library looks really promising, and I will quickly demo the library as well…
Continue reading “ReactXP — First Look🔥 – Nader Dabit – Medium”