Story of rewriting react-native-opentok and challenges that we have encountered down the road…

  • Finally, we solved all of them :)This article contains useful steps that you can perform in order to debug and fix real-life issues on native sideWhat is OpenTok?The OpenTok platform, developed by TokBox, makes it easy to embed high-quality interactive video, voice, messaging, and screen sharing into web and mobile apps.It…
  • Here are the most annoying issues that we have encountered on each platform respectively while writing clients:Android: Updating native view doesn’t work.We had a native view which we wanted to update after we connect to a session and receive a stream.
  • Our Subscriber view implements SessionDelegate class what means we can set this view as a delegate in session and listen on events i.e. when session receive a stream, session instance invokes method onStreamReceived on pointer to delegate.
  • Enabling zombies in Xcode is very easy.Click the active scheme in the top left and choose Edit Scheme.Select Run on the left.Open the Diagnostics tab at the top.Tick the checkbox labeled Enable Zombie Objects.Tick the checkbox labeled Enable Zombie Objects.Now Xcode’s Console will give you more complex message i.e.[RNOpenTokSubscriberView respondsToSelector:] message…
  • So remember when you reload JS part of application new instance of your native module will be created but if you are using singleton it will be the same instance as before reload.As I wrote at the beginning we solved all of our issues but some of them took a…

At Callstack we have open source meetings each month. At one of the past meetings we came up with idea to re-maintain our old project called react-native-opentok, because it was a bit dusty and…
Continue reading “Story of rewriting react-native-opentok and challenges that we have encountered down the road…”

jeromedalbert/real-world-react-apps #reactjs #Webdesign

jeromedalbert/real-world-react-apps  #reactjs #Webdesign

  • You’ll find the source code for the apps in the subdirectory.
  • Thank you to every developer who has worked on a project this repo links to, your work is helping developers learn React.
  • Given a GitHub repo for an app : – – The apps in are git submodules.
  • Git submodules are locked to a revision and don’t stay in sync with the latest revision.

real-world-react-apps – Real world React apps and their open source codebases for developers to learn from
Continue reading “jeromedalbert/real-world-react-apps #reactjs #Webdesign”

Leverage New Features of React 16

  • React 16 comes with some powerful new features, in this course we’ll be exploring each of them.
  • Each lesson is going to go over every individual new feature, one at a time.
  • From the new error boundaries that will save us many a headache to handling whether to update our state within our – – We won’t just be learning the technical capabilities of the new features however, we’ll also be going into best practices.
  • Once you watch this course you’ll be more than ready to leverage everything React 16 has to offer!

React 16 comes with some powerful new features, in this course we’ll be exploring each of them. Each lesson is going to go over every individual new feature, one at a time.
From the new error boundaries that will save us many a headache to handling whether to update our state within our setState
We won’t just be learning the technical capabilities of the new features however, we’ll also be going into best practices.
Once you watch this course you’ll be more than ready to leverage everything React 16 has to offer!

Continue reading “Leverage New Features of React 16”

Introducing Apollo Mission Briefing 🚀 – Apollo GraphQL

Introducing Apollo Mission Briefing  #apollo #react #javascript #graphql #reactjs

  • Introducing Apollo Mission Briefing 🚀Tips to supercharge your GraphQL dev in 5 minutes or lessA long time ago (about 20 minutes) in a galaxy far, far away (North Jersey)…Let’s be real: It can be hard to find the time to consume a dense, 10-minute read about technical best practices.
  • As much as we love churning those posts out on the Apollo publication, we don’t want time to stand between you and leveling up your GraphQL skills.That’s why we’re excited to launch Apollo Mission Briefing, a brand new video series starring the newest member of the Apollo team, Peggy Rayzis!
  • And of course, subscribe to our channel to get the latest episodes as we publish them.Without further ado, here’s our inaugural episode!Apollo Mission Briefing 001: Apollo Client 2.0In the first episode of Mission Briefing, you’ll learn how to connect a GraphQL server to Apollo Client 2.0.
  • You’ll also learn how to customize your Apollo Client cache and network interface with Apollo Link.
  • Enjoy!For those following along, here are the examples covered in this episode:Launchpad with GraphQL serverCodeSandbox with Apollo Client 2.0Stay tuned for more snack-sized GraphQL goodness!

Let’s be real: It can be hard to find the time to consume a dense, 10-minute read about technical best practices. As much as we love churning those posts out on the Apollo publication, we don’t want…
Continue reading “Introducing Apollo Mission Briefing 🚀 – Apollo GraphQL”

JavaScript: The beauty of arrow functions – LeanJS – Medium

JavaScript: The beauty of arrow functions  #react #arrowfunctions #es6 #javascript #reactjs

  • JavaScript: The beauty of arrow functionsArrow functions are an awesome ES6 language feature for a number of reasons, but we believe there are 3 key reasons they really shine:They are more conciseThey allow for implicit returnsThey get their “this” value from the context, meaning it comes from the callerLet’s look at some ES5 vs ES6 code:In the above code example we compare the ES5 and ES6 way of grabbing some values from an array of objects.More ConciseThe most striking thing is the amount of code, less code means less probability of introducing errors.
  • Secondly it’s obvious that our arrow function has improved readability here, it’s also more declarative.
  • Being concise and declarative with code is especially important when working in teams, it saves time and improves outcomes.Implicit returnsThe ability to return values implicitly builds upon the first point, we no longer need to add extra syntax such as the {} and return keyword if they are not needed.
  • So context is simply the one who is calling the function.If this isn’t clear, have a play with the code yourself here: why is getting the “this” value from the context useful?Before we had to bind our functions explicitly to make sure they had the right “this” value:We can of course continue doing this, but now we have a more concise way of doing the same thing:Summing upUsing arrow functions allows us to use a more concise and declarative syntax while eliminating the need for us to bind them explicitly.
  • There are of course a few more things to know about arrow functions which are beyond the scope of this post.

Arrow functions are an awesome ES6 language feature for a number of reasons, but we believe there are 3 key reasons they really shine: In the above code example we compare the ES5 and ES6 way of…
Continue reading “JavaScript: The beauty of arrow functions – LeanJS – Medium”

Why ReactJs? – (┛◉Д◉)┛彡┻━┻ – Medium

Why ReactJs?  #react #reactjs

  • Instead of writing an html line for news, messenger and marketplace you can see that they are basically the same, the only thing that changes is the icon and the information so we can make a component called nav that receives information and an icon.
  • Let code this component:First, we are going to make its container, with an JSON object with the information we want to be see.Now we are going to do the component:Using this practice, we are able to create a web app by just iterating a JSON object, that will pass the information to the containers.Another cool thing of react is its community.
  • There is a lot of components already made so you can just add them to your project as easily as adding a library to your normal html code.
  • Some github repositories that have a lot of components are:· lot of people have a problem with HTML being mixed with JS because they feel like breaking separation of concerns but in reality, it is more of a separation of technologies rather than concerns.
  • It helps your application to be more efficient because you don’t need to repeat code, there is an amazing community behind it, it has some really awesome modules that helps you to manage the unidirectional data flow, as well as managing which component must be render and if it is a component that is visible in all of the pages such as a menu to just render it once instead of every time you change of page.Tldr: react is awesome.

React is a new JavaScript library developed by Facebook released in 2013, but it wasn’t until 2017 that react was stable. React is like the best of both worlds, it has the functionality of JavaScript…
Continue reading “Why ReactJs? – (┛◉Д◉)┛彡┻━┻ – Medium”

Iterators Using ES6 – Felipe Valdivia – Medium

  • However, as is often the case when a task occurs frequently, JavaScript now provides methods that simplify this task.These methods, called iterators, are called on arrays and complete such tasks as altering each element and selecting elements that fit certain criteria.So in this article you are going to learn how to use some of this iterator.
  • forEach()” will execute the same code on each element of an array.forEach() ExampleThis iterator will execute the same code on each element of an array, so in the example above we are going to go over each element in our array and print it on the console, the argument that you can see in parenthesis doesn’t matter in this case we are using “fruitItem” because is a good practice to have descriptives names.
  • map() iterator but in this case we are creating a new array with the result, so we need to create the variable and inside the block have the condition, that in this case we are going to create a new array with all the numbers divided by 100.
  • filter() exampleIn this example you can see how with filter we go over all the items but we just return the ones that are shorter than 6 characters creating a new array just with these data that is already filter for our condition.ConclusionYes I know this article is short but I present to you 3 different types of iterator using javascript with this you can start playing with them creating projects just to get familiar with them.I can give you some research task that you can do, look for this 3 other that they are pretty common and learn how to use them, I hope you can start a project with this information or solve different problems.so briefly we can say:.
  • filter() checks every element in an array to see if it meets certain criteria and returns a new array with the elements that return truthy for the criteria.You can visit the Mozilla Developer Network to learn more about iterator methods (and all other parts of JavaScript!)

Hello guys this is my second article here about front end and this time I am going to be talking about the different iterators that we have in EcmaScript6. The idea of this post is just show you some…
Continue reading “Iterators Using ES6 – Felipe Valdivia – Medium”