Eleven Fifty Academy

Last week I was fortunate enough to join with the two Daves from getfretless and help them to teach a group of developers the core concepts of angular.js and node.js.

This was a full five-day course where most students stayed and learned for more than 8 hours per day at the campus of the Eleven Fifty Academy.

I had a wonderful time helping students create a real application with a Node.js REST API, and well constructed angular front-end. I will be continuing to teach courses like this in the future at Eleven Fifty and hope to have many more classes that were as receptive and eager to learn JavaScript as this one. Thanks to the class for a great week.

Introduction To React - Officially Published!

It has been a while since I posted that I was writing a second book, Introduction to React. Today it is officially available in both ebook and paperback formats. I hope you enjoy reading the book and the introduction to React as much as I enjoyed writing it.

Introduction to React teaches you React, the JavaScript framework created by developers at Facebook, to solve the problem of building complex user interfaces in a consistent and maintainable way. React.js shrugs away common front-end conventions in an effort to make things more efficient – use Introduction to React to learn about this framework and more today.

You will learn what React is, and why it was created to solve the problems it does. You will get to know the React API, and be introduced to React’s specific JavaScript extension, JSX, which makes authoring React components easier and maintainable. You will also learn how you can test your React applications and the tools you can use while building. Once you understand these core concepts, you can build applications with React. This will help you cement the ideas and fundamentals of React and prepare you to utilize React in your own use case.

What you’ll learn

How to use React to maintain complex user interfaces in an efficient way
How to integrate existing user interfaces and move forward with React
How to manage application architecture using Flux
How to easily utilize JSX, React’s JavaScript extension

Who this book is for

Introduction to React is for a web developer who is comfortable writing JavaScript and CSS. You will apply JavaScript to build web pages that utilize the paradigm shifting React framework. Introduction to React will provide you with the tools to create maintainable complex user interfaces.

Trying to Run React Native Android on Windows

React Native for Android was released yesterday. As soon as I spotted the release I wanted to give it a whirl on my work PC. I did the npm install and got started right away, only to find that the init command was failing. I expected this because officially React Native isn't supported on windows but there is this master tracking issue for this in Github =>  https://github.com/facebook/react-native/issues/2693 ... anyway.. so I got an error:

events.js:141
      throw er; // Unhandled 'error' event
      ^

Error: spawn npm ENOENT
    at exports._errnoException (util.js:837:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
    at onErrorNT (internal/child_process.js:344:16)
    at doNTCallback2 (node.js:429:9)
    at process._tickCallback (node.js:343:17)
    at Function.Module.runMain (module.js:477:11)
    at startup (node.js:117:18)
    at node.js:951:3

Not being one to give up right away I wanted to fix it. I noticed from the error message that the spawn of npm using ('child_process').spawn was causing the error. Luckily, npm contains several modules that can be a drop-in replacement for this and I just grabbed the module cross-spawn. I needed to fix this inside the react-native-cli/index.js file.

This fixed this first error. Next, I encountered an error where the script could not find my Android SDK. This is pretty much expected because on my machine I'm running Android Studio so it is the only place that knows about the SDK.  The quick fix here is to find the path to the Android SDK and add that to a new environment variable ANDROID_HOME.  I also needed to make sure that my JAVA_HOME environment variable was correct so that the build process would be able to find it.

Awesome, now I'm nearly there. I started my JS Server to watch for changes, I'm using Console 2 and Git Bash here

$ react-native start

Then in another console tab I run:

$ react-native run-android

Result:
It works, but not really.

First it seems to think that I'm not running my JS server, but then it kicks in to fetch the file changes. 

This gets my hopes up. but then goes back to the red screen of fail.  Why did it do this?!!?  Well it seems that there may be an underlying issue with the way that the packager works on Windows based on the error that the packager spits out. I'm guessing that there is a simple thing to get this to work, but for now I'm moving back to OSX to do React Native.

        React packager ready.

[1:39:35 PM] <START> Building Dependency Graph
[1:39:35 PM] <START> Crawling File System
[1:39:52 PM] <END>   Crawling File System (17082ms)
[1:39:52 PM] <START> Building in-memory fs for JavaScript
[1:39:54 PM] <END>   Building in-memory fs for JavaScript (1498ms)
[1:39:54 PM] <START> Building in-memory fs for Assets
[1:39:55 PM] <END>   Building in-memory fs for Assets (1421ms)
[1:39:55 PM] <START> Building Haste Map
[1:39:56 PM] <START> Building (deprecated) Asset Map
[1:39:56 PM] <END>   Building (deprecated) Asset Map (326ms)
[1:39:56 PM] <END>   Building Haste Map (905ms)
[1:39:56 PM] <END>   Building Dependency Graph (20907ms)

<--- Last few GCs --->

  157866 ms: Scavenge 1402.8 (1455.6) -> 1402.8 (1455.6) MB, 12.3 / 0 ms (+ 3.0
ms in 1 steps since last GC) [allocation failure] [incremental marking delaying
mark-sweep].
  159306 ms: Mark-sweep 1402.8 (1455.6) -> 1402.7 (1454.6) MB, 1440.1 / 0 ms (+
4.0 ms in 2 steps since start of marking, biggest step 3.0 ms) [last resort gc].
  160988 ms: Mark-sweep 1402.7 (1454.6) -> 1402.7 (1455.6) MB, 1681.5 / 0 ms [last resort gc].


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0000034B02A37349 <JS Object>
    1: join [path.js:~217] [pc=000002DAEE697E24] (this=0000026D39474171 <an Object with map 0000031DF7E23E19>)
    2: arguments adaptor frame: 3->0
    3: /* anonymous */(aka /* anonymous */) [c:\GitHub\AwesomeProject\node_modules\react-native\packager\react-packager\src\DependencyResolver\DependencyGraph\ResolutionRequest.js:~226] [pc=000002DAEEEC76DA] (this=0000034B02A04131 <undefined>,real...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory

I'm going to be tracking this all down and hopefully then pushing this work back to the react-native repo as a pull request.

Introduction to React

A few months ago I was approached by my editor from Node.js Recipes to discuss the possiblity of writing another book. This coincided with a time where I had been spending time working with React for side projects, and it just so happened that the title which I would be writing is Introduction To React.



 So I decided to write the book and spent the next 11 weeks writing it. I am currently finishing up the edits and the book is due to be published in September. I'll be sure to update as the publication date approaches.

dev.Objective()

Every time I attend a conference or get bogged down following all the new tools and frameworks that are coming out in the front-end development world (which seems to happen daily) - I decide that I want to write a talk about how we as developers can optimize our front-ends without rewriting everything from scratch.  I finally was able to get an abstract for a talk that will address such things written a month or so ago. I then decided to submit this talk to DevObjective, a conference happening in Minnesota in May. I feel that this talk might hit well with the audience as one of the things that stood out for me from the conference site was the following sentence:

Cutting edge stuff is awesome, but most people are more concerned about getting their jobs done now

I feel that this hits home with me, as I love to just be able to get my job done now.  I'm not saying that we can't enjoy the advances made by new and modern frameworks, even if we are working on a years/or decades old project, but we can make smart choices to modernize our applications. Luckily my talk was accepted and I'll be speaking about "Front-end Modernization for Mortals" in May  at Dev Objective.

I'm excited to be joining a group of speakers who will be discussing a wide variety of topics from which any developer should be able to gain some valuable knowledge for their daily jobs. If these sound like something you would be interested in, you should join me at the conference in May!

At the time of this writing, there is still time for the early bird pricing if you click the banner below: