The first speaker, Rose Weixel, spoke about using Ruby and #Ajax to provide real-time web updates. Her nail-polish sharing site (www.lacquerlove.com) requires updates whenever anyone in one’s network updated their status. This means, that unlike in many examples, the user does not initiate the update, so updates of the back end information signal a need to update the display since the trigger event is on another client.

She then walked through three solutions

Solution 1 – refresh continually by calls to Ajax every 3 seconds –but this causes excess refreshing and refreshes the entire div. Also refreshes any fields that the user might be entering data.

Solution 2 –don’t refresh if date due field is inFocus. This allows the user to enter data without interruption, but it’s still inefficient

Solution 3 – output all transactions and states so they are stored in the local page. Then the back and front ends can be compared by the back end whenever there is a trigger event in the back end. So, the front end is only updated when new information arrives at the back end and only the parts of the DOM that need to be updated are updated.

—

Next, Mayank Patel@inRhythm introduced #React (a preprocessor for #JavaScript) as a way to speed page updates and simplify JavaScript syntax. He also talked about React Native which brings the power of React to native mobile developers.

Mayank gave examples on how React has a more streamline syntax than JavaScript:

Assignment of several values in a single line of code

Arrow functions – shorten function definitions by eliminating the need to include ‘function’ in the definition

Shorten the function definition

He also talked about how React renders changes in the virtual DOM viewed by the user prior to making changes in the actual DOM.

Mayank next described how React Native is a version of React that can speed iOS development. As in web development, Reactive Native speeds up the UI. But it also provides the ability to speed development by eliminating some recompilations of the code since React and JS can be imported and run directly on the interpreter.

Do not yet have an Android version, but it is in development.

—

Kirill Cherkashin spoke about a diverse set of tools for developers:

#PixelPerfect

#Emmet

#Workspaces

#ColorPicker

#Snippet

Pixel perfect is a Chrome plugin that allows you to place and resize an image over other web content. Since the image can be make partially transparent, the image can be sized to correctly fit with other elements of the page.

Emmet is a plugin within text editors that makes it possible to abbreviated entry of html structures. For instance, instead of needing to fully type in div class as :

‘<div class=xxx></div’ one need only enter ‘div.class’

Two tested classes can be entered as ‘one.two’

And so forth.

Workspaces are Chrome devtools so edits of css lines are immediately reflected in the formatting of elements.

Color picker allows one to hover on the page and pick colors from elements.