Key Takeaways from Saint Petersburg’s Front-End Design Conference

in Strategy & Trends | by Admin

A View from Dev: Below is a recap if the front-end web design conference held in St. Petersburg, FL on June 16-17. Our very own dev intern, Victor Cui recaps his experience.

On Friday, June 17th, I participated in a front-end web design conference in Saint Petersburg.  This three-day conference for web professionals who love their community, the web, and learning was held at the magnificent Palladium Theatre. It’s filled with tech talks by skilled developers and designers eager to share their experience, networking events where digital agency recruiters seek out ambitious, creative jobseekers, and of course, Kahwa coffee. After reflecting on all the amazing tech presentations, two stood out to me: Using React.js, and the increasing use of flexbox.

React.js

The Model-View-Controller (MVC) model is a paradigm in which many developers like to think of their web applications. Basically, the View is the “front-end”, what users see when they type in http://yahoo.com, the Model is the “back-end”, holding server-side application state and the database, and the Controller maps client requests to server responses and ensures the correct page is being rendered given some parameters and the current state of the application. React.js is an open-source (hallelujah!) javascript library used for providing efficient views for data rendered as HTML (the V in MVC). It was designed by a software engineer at Facebook in 2011, and is currently used on big-name sites like Instagram, Facebook, Netflix, and Airbnb.

Benefits of React.js

With large single-page applications containing data that changes over time, it’s tedious to track down the right changes you want in your HTML based on your data. After interning at Sparxoo for a month developing in PHP and WordPress, I understand how complicated a website can get, with tons of template files that display different HTML based on PHP variables. Using React, the only thing you need to develop are reusable React components, almost like classes in object-oriented programming. When the data inside these components change, React knows to only update the HTML affected by those changes and leave everything else alone. One of the best features of React is the “Virtual DOM”, which selectively renders HTML nodes based on state changes.

React.js in Action

React.js has an awesome fiddle on its documentation site.

React.JS Fiddle

To call React in your HTML, first you need to reference the React file within a <script> tag. This effectively loads React in your browser. Then in your javascript, you call the createClass method of the React class to create a variable (Hello). This variable is then going to react to data changes (Haha, get it?). The render method of the Hello React variable is crucial— it determines how it will be displayed in HTML. Later on, in the render method of ReactDOM, the name property belonging to the Hello variable is given an attribute of “World”, which acts on the element with an id of “container” in your HTML. If the attribute was instead something like “Joe”, the div would display “Hello Joe” in the HTML.

Things to Remember

Remember that React only handles the View layer (i.e. it can only render HTML, albeit using a template language). This distinguishes React from Angular.js or Ruby on Rails, for example, which are complete web frameworks (they handle the model, view, and controller). The javascript React fiddle above at first looks confusing—is it HTML or javascript? Turns out, it’s a mixture of both in what React developers call JSX syntax. The idea behind React is that since your giant javascript file is often used to manipulate HTML, we should just pair them together as they go hand-in-hand. Keep in mind that you can render React on both the server and the client, but React unfortunately does not support any browser below IE8.

The Birth of Flexbox

Throughout my internship at Sparxoo, the most time-consuming task for me has often been CSS. Making a website look exactly like a Photoshop document is much harder than I expected. Although I realized I needed to strengthen my CSS knowledge, could at least part of the blame fall on the language itself?  Centering things horizontally on an HTML element has traditionally been handled by setting margin-left: auto and margin-right: auto, thus forcing the browser to put equal margins on the right and left. However, if the element doesn’t have a specified width, it won’t center.  That means percentage widths like width: 80% won’t work either because it’s based on the width of its parent element.

Codepen Horizontal Center

And vertical centering? You can forget about it. Setting margin-top: auto and margin: bottom auto won’t work at all. For years, developers have achieved vertical centering through negative margins or display: table or hacks involving pseudo elements. Enter the golden age of Flexbox. To use Flexbox, all you have to do is set display: flex on an HTML element in your CSS. According to its specs, the Flexbox layout aims at “providing a more efficient way to align and distribute space among items in a container, even when their size is unknown.” A flex container expands its items to fill available free space, or shrinks them to prevent overflow. It’s sort of similar to CSS frameworks like Bootstrap or Foundation, except more customizable because you have more control over which items are Flexbox (for example, you can have a div with display: flex sitting next to a div with display: inline-block). With Flexbox, you have a major axis and a minor axis. If the flex-direction is set to row (the default), then setting align-items: center; on the HTML element container that’s display: flex will vertically center its children, and justify-content: center; will horizontally center its children. Setting both align-items: center; and justify-content: center; on a container will horizontally and vertically center its children! Note that if the container’s flex-direction is set to column, the align-items and justify-content properties work in reverse (align-items: center; will horizontally center its children, and justify-content: center; will vertically center its children). There are numerous other display properties you can control with Flexbox, including the order its children display on the web page. Although Flexbox is awesome, there are certain situations in which you want to avoid using it. Flexbox has no support in IE8 and many bugs in IE11.