|
|
|
|
Issue #143 (Why React, Testing, Git/CLI, jQuery)04/14/16
Unless you're really new to web development, you probably know that React is one of the hottest JavaScript libraries in terms of usage, tools, and demand. I'd call it the new jQuery – it's that popular. This newsletter has featured tons of React-based tools, so in this week's intro, I thought I would briefly summarize, using a few different articles, exactly what React is and why you might want to look into using it.
First, from the official website, it's defined as:
"A JavaScript library for building user interfaces."
So it focuses on the UI, or what the user sees and interacts with on a page (more or less). The docs further state:
"React is all about building reusable components. In fact, with React the only thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy."
In relation to components, the following Reddit comment illustrates this benefit nicely:
"Ever work on a project with index.html and then one big app.js of jQuery select/trigger soup? That's not separation of concerns. That's just indirection. Proof: Change index.html in a random way. You'll have to check app.js to see if it broke anything."
So React doesn't care about the traditional "separation of concerns", but rather is concerned with helping to build reusable modules (in the same vein as Web Components), separating concerns in a more intelligent and usable manner.
As many sources point out, React is not a full MVC library. It's the "V" in "MVC", that is, the View layer. As Andrew Ray explains:
"'React vs Angular' doesn't make sense because they aren't directly comparable things. Angular is a complete framework (including a view layer), React is not."
As Andrew further states, React doesn't provide you with an event system, Ajax functionality, promises, and so on. It's just the view layer.
A comment on that article by "aaronbieber" adds another benefit of using React – Virtual DOM:
"React collects all of the changes you wish to make to a page (by applying them to an in-memory DOM representation), and then computes the most efficient delta against the actual DOM, making the fewest number of changes possible."
In other words, React is great for performance.
Many of the resources I've looked at on React basically say the same thing: React is doing now what the whole Web will be doing later (in reference to its components and how this benefits maintainability).
That's just a small sampling of articles and comments on what React is and why you should give it a try. Here's the full list, with one additional link:
Now on to this week's tools!
Testing and Debugging Tools
snapline
"Unleash your screenshots stored in Chrome Devtool timeline files."
match
"A JavaScript library to test JSON with some nice features. It is built to test REST API endpoints but, of course, you can use it to whatever you want."
AVA
"IO in Node.js can happen in parallel due to its async nature. AVA takes advantage of this and runs your tests concurrently, which is especially beneficial for IO heavy tests."
webpack-validator
"Validates your webpack config with Joi."
Web Manifest Validator
"This page is meant to be used to test the validity of a Web Manifest. The parser follows the rules from the W3C specification."
R42 Module Loader
Chrome extension. "Allows you to load bower/npm compatible modules into your browser persistently on a page-by-page basis, and opens them up to console usage."
imgix Page Weight Tool
"Find out if images are slowing down your web pages. Learn how to take steps to optimize them better."
Insight
"A WebGL debugging toolkit providing a variety of capabilities enabling more productive WebGL development and more efficient WebGL applications."
Spotbot
"Visual monitoring for websites. Spotbot takes screenshots of your web page with iOS, Android, and desktop browsers, then lets you know when changes need attention."
Git, GitHub, and Command Line Tools
wring
"Extract content from webpages using CSS Selectors, XPath, and JS expressions."
Cash
"A cross-platform implementation of Unix shell commands written in straight ES6. No native compiling and no external dependencies."
GitLab Pages
The GitHub Pages equivalent on GitLab.
Github Omnibar
Chrome and Firefox extension that adds a Bitbucket-like "Omnibar" to GitHub.
CodeMill
"A Marketplace for Pull Requests. CodeMill makes it dead simple to get your software development done by members of the GitHub community. No interviews, no contracts, no hassle."
GitLogs
"GitHub News: Discover the top trending repos."
Notifier for GitHub
Chrome, Opera, Safari, and Firefox extension. "Displays your GitHub notifications unread count."
Mosh
"Remote terminal application that allows roaming, supports intermittent connectivity, and provides intelligent local echo and line editing of user keystrokes. Mosh is a replacement for SSH."
jQuery Plugins
EventControl
"jQuery timeline control with support for stacking events."
Snapback Cache
"A client side page cache for jQuery."
dynamicColorPage
Adds a color/theme customizer to a website to allow website visitors to change a site's theme/colors.
jqGifPreview
Facebook-like animated GIF previews with the ability to play/pause.
jQuery Anchorify
"Creates anchors for headings in your website."
almightree
Makes large, nested lists easier to navigate.
jQuery easypin
Lets you "pin" notes/text to clickable hotspots on images. Similar to tagging on Instagram images.
jQTipnav
Adds a small action/navigation bar to elements on hover.
okayNav
"This navigation aims at progressively collapsing navigation links into an off-screen navigation instead of doing it for all the links at the same time."
skippr
"A fast & light jQuery plugin for creating tasteful slideshows."
A Tweet for Thought
This response is somehow perfect.
Suggestions / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
Occurrences of this should never happen on GitHub.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
