The State of Front-end Tools in 2016, Optimizing your React application and Structor

Earlier this week, the results from a recent survey on front-end tools were published. The survey included a wide array of questions surrounding developers' experience with CSS, JavaScript and the plethora of tools available for writing code with these languages.

Our newsletter this week includes a variety of tools, tips and techniques to improve React application development and performance:

The revamped React documentation has some great tips on how to optimize React applications for performance. Some of the simple techniques can go a long way in creating more performant apps.
Are you exhausted from JavaScript fatigue? Read a study plan by Sacha Greif to cure it.
Autoprefixer is a tool for speeding up your CSS development. Check it out and save yourself a few keystrokes.
Drag 'n drop UIs for creating applications is a concept that has been around for a long time. Structor is a drag 'n drop editor specifically built for React applications. In the same vein, React Monocle let's you visualize your React component hierarchy.

Happy Coding!

-Sophia Shoemaker

Frontend Tooling Survey Results

This survey was aimed at finding out more details about the tools front-end developers are currently using. The front-end world has no shortage of tools and this survey aims to discover what tools front-end developers are using the most and which tools are still "hidden gems". The survey was split into two sections, CSS & JavaScript and the JavaScript section had some interesting results regarding libraries and frameworks (take a guess at which had the most growth from the previous year's results!)

Tutorials

How much scaffolding do you need for JavaScript in 2016?

When building a shed, you do not need large amounts of scaffolding. You do not need a crane (2016 edition or otherwise). You don’t even need a modern slick delivery pipeline that will automatically ship in your raw materials as you need them with the shiniest modern cool trucks. In fact, these things are not just overkill, they will actually get in the way. You’ll be knee-deep in your crane’s instruction manual long after you could have already finished building your little shed. The same applies to building with JavaScript. With so many tools and methodologies out there for building applications, it's hard to know where to start. This article gives some useful tips on how to determine which tools are right for the job.

A study plan to cure JavaScript fatigue

If you're just getting started with React and front-end development in general, this study plan is a great resource to give you the right building blocks in the right order. The author recommends using Gatsby as a tool for your first starter project, but I'd recommend the tool built by Facebook: create-react-app. Gatsby is great for static sites, which if that's what you're wanting to build with React then use it! If you're looking to build a single page application or even a smaller widget, create-react-app is a better choice.

Optimizing Performance in React

Some tips and tricks on how to optimize React applications.

Code

Autoprefixer

One of the tools mentioned the Front-end Tooling survey was Autoprefixer. Write all your CSS rules without vendor prefixes! Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you. Try out the interactive demo of Autoprefixer.

Structor: A visual editor for creating React applications

Despite what you might think, Structor is not the name of a new Transformer, it's actually a useful tool for building React applications.

Features of Structor:

Construct a React component of any complexity combining components and styling them right on the page
Generate scaffolds of different types of React components (dumbs, containers) with different configurations
The Structor Market contains full-fledged componets which can be used in your project
Modify the source code and get instant feedback from embedded Hot Reloading tools

See the instructions on how to use Structor to create your next React application.

React Monocle

React Monocle is a developer tool for generating visual representations of your React app's component hierarchy. React Monocle parses your React source files to generate a visual tree graph representing your React component hierarchy. The tree is displayed along with a live copy of your application.

About

Fullstack React: The Book

Learn React the right way with Fullstack React: The Complete Guide to ReactJS and Friends. If you've already purchased a copy, you automatically get access to the latest changes. If you haven't purchased a copy yet, don't delay and get the most up to date and comprehensive information and tutorials.

Like what you've been reading from Fullstack React? You can help us spread the word. Please forward this email to you friends (and let them know they can subscribe here).

Follow us on Twitter

Curated with love by Sophia Shoemaker, Nate Murray and the Fullstack.io team.

Suggestions are welcome, just reply to this email - we'd love to hear from you.

Subscribe with Email

Issue 44 November 30th 2016