Top Posts & Pages
- An error has occurred; the feed is probably down. Try again later.
- An error has occurred; the feed is probably down. Try again later.
Error: Twitter did not respond. Please wait a few minutes and refresh this page.
Both the video and the Gatsby blog post show you how to get started in using Gatsby with React. It definitely helps if you have done some React.js programming because then the utilities required like Node, npm, yarn , and Webpack will not only be around but familiar to use.
What Gatsby Reveals About React.js
Note the frustration of a newby to React as illustrated by some of the underlying React code in Gatsby:
1)easier development of derived components
2)easier to understand the code layout components
4)broader set of interfaces to other systems with GraphQL, Node.js, REST API, etc.
Finally, React is accumulating a broad set of endorsements not the least of which is its use in Gutenberg and Calypso for the major ongoing upgrade of WordPress. Considering that WordPress is used on 24% of all the websites in the world this is an impressive endorsement beyond the fact that React is the primary Web language of Facebook, Reacts inventors.
Okay, to be sure it is not the identical WordPress.org version of Gutenberg with its almost stray- dog selection of blocks as seen below:
But clearly the new WordPress.com editor has the look and feel of Gutenberg. As you can see in the screenshot below the new WordPress.com editor has a lot of features and design layout similar to Gutenberg:
Specifically, the new WP.com Visual Editor uses the same title field, top taskbar style, and a Content Editor block that reflects much of the previous Visual Editor functionality. However, the sidebar has a vertical accordion toggle straight out of Gutenberg [or vice versa – who knows which came first].
But what is fascinating is the new Media tool in the block’s +Add pulldown. Media handling now is really supercharged as seen in the screenshot:
These improvement in how galleries of images can be displayed is a big step-up over the traditional Media tool in WordPress.
So there are signs that Gutenberg ideas get tried and tested at WordPress.com in its new Visual Editor. So once again, WordPress.com resumes its role as a test arena for WordPress.
Here is the horror in a full page story:
Or here in the rapidly changing React.js world:
The last 4-5 years have seen the rise of open, free and popular CSS+HTML5+JS frameworks like Bootstrap, Foundation Zurb and Ink for creating mobile responsive apps for a variety of SPA-Single Page Applications to larger multi-page websites. It should not be a surprise that each of these free frameworks have generated a number of libraries of free and premium themes and templates to give your app development a quick start. Shown below is the StartBootstrap library:
There are similar themes/templates for Foundation Zurb. Ink and other JS frameworks. These theme libraries are very similar to WordPress or Joomla theme/templates. So it should not be a surprise to see a tool like Mobirise appear which in effect delivers a Bootstrap IDE. This tool allows you to build your own theme template and website in drag and drop fashion with immediate frontend WYSIWYG feedback. This reviewer can testify Mobirise certainly delivers very fast website design and development.
Like other CMS and JS frameworks, Mobirise provides basic free and premium templates which web developers then cut/paste to modify:
There are benefits to each development method. The frontend, interactive method favors development speed and immediate design resolution. The traditional approach gives finer control over both the the UI component functionality and refinement of the UI styling. But the Mobirise template approach certainly delivers fast results. The following photo-promo website was designed and delivered using Mobirise in less than a day including all the photo refinements:
So if you need to deliver a small to medium size website, Mobirise can help deliver quick results that can be refined in the traditional tools like NetBeans or WebStorm. So the question now is how far can Mobirise take you and at what cost
First and foremost Mobirise is a free, standalone app that runs in Windows and Mac and delivers responsive, mobile apps using Bootstrap 3 and 4 codebase.. And the free app has 2 free theme templates which provide a core set of blocks including hero image, image slider, text block, and image testimonial blocks. To get the full range of blocks for Mobirise, users can buy a selection of individual blocks or packages of several blocks as seen in the screen shot below:
The prices roughly correspond to those paid for premium WordPress plugins and themes. But the big difference is that these themes and extensions can be used in an unlimited number of personal and commercial websites. Support is through a forum and updates to the themes and extensions may incur an added cost. See the video below to see the full range of themes and blocks available:
UI/UX Web Libraries Proliferate
DHTMLx – solid web components and database connections, free basic edition
EasyUI – jQuery-based framework with 41 UI widgets/components
EXTjs – a whole family of tools including interactive editor, premium prices
jKit – jQuery-based framework with 44 UI widgets/components & template system
jQWidgets – jQuery-based framework with many integrations & free for personal use
Kendo-ui – jQuery-based UI framework free for personal use, fee for commercial use
Wijmo 5 – Typescript based UI mobile + data charting framework for license fee
Zinoui – jQuery-based framework with Canvas and slider components
The downside to these tools is that they need to fill-in gaps in touch, mobile, message-handling,two-way binding and/or responsive functionality giving an opening to a huge wave of newer frameworks that handle these problems plus add live model connections.
Ionic – uses Angular and Cordova to develop and deliver micro-apps
Onsen UI – uses Monaca for an IDE and supports Angular, React and jQuery for its apps
Intel XDK – supports the broadest set of mobile platforms and App templates
Framework7 – supports iOS only but fast native apps designed in HTML+CSS+JS
jQuery Mobile – apps run in iOS and Android but with its own Material Design-like style
Trigger.io – has tight link to native components; thus better perfromance, premium prices
Famo-us – supports wide set of 2D & 3D libraries for animation & game micro apps
Angular.js – Google inspired mobile/desktop MVC framework
Aurelia.js – emerging JS framework based on Durandal and Angular
Backbone.js – is a popular MVC framework library
Ember.js – forefront MVC and ECMAScript 2016 with 2-way binding etc.
Knockout – original MVVM framework with components
Polymer – delivers Web components with heavy npm, bower, gulp, grunt todos
PrimeFaces – derives its web components from Jfaces
React.js – provides robust Viewer capabilities to MVC designs
Vue.js – smoother component, directive, template model
W3Techs has an interesting table of the increasing use of major JS libraries:
Bonsai.js – library with intuitive graphics API and an SVG renderer.
Babylon.js – JS framework for building 3D games with HTML5, WebGL & Web Audio
CanvasExpress – free, robust2d & 3D charting library
D3.js – open charting and data display library with scores of code examples. Also supports component libraries like C3, D3Chart, NVD3, EmberCharts, etc
Chartist.js – smooth charting integrates with angular, ember, meteor, react, etc
Draw2d – create Visio-like diagrams in canvas layout
Dygraphs – charts large datasets associated with huge databases
FamousEngines – 3D physics engine and interface framework
Fusioncharts – free for non-commercial use, wide range of 2D & 3D charts
oCanvas – creates objects and diagrams in HTML5 Canvas
SimpleStatistics – basic to advanced statistics routines
SnapSVG – create SVG based drawings and diagrams
Velocity – does high speed animations using jQuery model
Vivus – does simple, effective SVG animations – great for live logos
Breeze.js – interfaces to database tables with advanced queries
Cytoscape – directed graph JS library
DataTables – JS grids + tables with sorting, filtering and paging
Dataset – JS data loader and styler
Gantt Charting – jQuery Gannt charting routine
JIT – a very rich set of JS data visualization routines
JSreports – json and data tables report writing, free for non-commercial
Processing.js – data visualization routines in JS
Reclinejs – data interface and handling JS routines
SlickGrid – lightning fast JS grid/spreadshet
Visualize.js – taps into Jaspersoft report and analytics with JS framework
ContentTools – you have to visit and see what this free JS editor does
Raptor Editor – inline JS HTML editor with many options
It is easy to add these tools into a Bootstrap or Foundation Zurb app so that users comments and other text messaging is handled well.
FlipBook – magazine/newspaper-like page flipping component for JS+WP
Imgrid – responsive image grid with 4 layouts, 20 effects, lightbox, filtering, etc.
Lollipop – image editor with flip, rotate, crop, sharpen, brighten, saturate, etc
PhotoGrid Pro – interactive JS+WP image grid builder with animations and text effects
RoboCrop – image crop plugin using touch and mouse gestures
Showup – innovative lightbox with animation and themes
ShufflePuzzle – JS+WP image broken into puzzle grid for touch, mouse solving
Slider Revolution – animated JS+WP sliders with layers, lightbox, carousels, etc.
SnapGallery – free, jquery based responsive gallery plugin
Bower – is a package manager for Web package: node, git, npm dependent
Gulp – is streaming build system overlaps Grunt: npm, require
Grunt – task runner for minification, compilation, unit testing, linting etc
Node – largeest package ecosystem on the Web
There are many other JS operational routines. Read this review for an idea why there are so many JS operational routines and why they are open but opaque. One of the attractions of Meteor.js is that it takes over and manages many of these operational tasks itself.
jQueryRain – shows hundreds of jQuery based plugins across 39 categories
Web performance has three components: speed, reliability and security. For example, speed has become a critical measure in Web development. Google now includes speed of load time as a key ranking component for a website. And there are countless studies that show how important website response time is for conversions and buying:
- The Obama campaign redesigned its pages for online donations with a 60% increase in speed leading to an increase of $34 million in donations;
- Mozilla increased its Firefox downloads by 60 million per year by getting their pages to load 2 seconds faster;
- Almost half of users expect websites to load in two seconds or less (Akamai)
- 51% of online shoppers in the US will not complete a purchase if the site is too slow (Radware)
- A one second delay in response can result in a 7% decrease in conversions (KISSmetrics)
- More than half of users abandoned websites that took more than 3 seconds to load (Akamai)
- Conversions increase 74% when load times drops from 8 to 2 seconds (ConversionXL)
- Converted shoppers receive pages that loaded 2x faster than non-converted shoppers (Web Performance Today)
- Walmart discovered that for every 100ms increase in site speed, their revenue increased by 1%. With every second of reduced load time, their conversion rate increased by 2%.
|Test||JS speed||JS size||PHP speed||PHP size|
|binarytree-12||0.60 sec||6.00 kb||0.37 sec||1.28 kb|
|binarytree-20||48.92 sec||937.6 kb||237.49 sec||440.5 kb|
|fannkuch-redux10||0.51 sec||11.06 kb||9.52 sec||7.78 kb|
|fannkuch-redux12||89.06 sec||11.07 kb||300.80 sec||7.79 kb.|
|fannkuch-redux3-10||0.44 sec||11.04 kb||1.66 dec||29.17 kb|
|fannkuch-redux3-12||74.47 sec||11.07 kb||300.80 sec||29.2 kb|
|fasta2-25k||0.43 sec||22.86 kb||1.37 sec||7.81 kb|
|fasta2-25000k||25.64 sec||43.07 kb||135.7 sec||7.76 kb|
|knucleotide-25k||3.18 sec||53.09 kb||0.28 sec||6.41 kb|
|knucleotide-25000k||283.31 sec||425.68 kb||21.76 sec||230.45 kb|
|regexdna2-50k||0.07 sec||?||0.08 sec||?|
|regexdna2-50000k||3.44 sec||584.3 kb||5.18 sec||153.24|
|revcomplmt-50k||0.45 sec||21.32 kb||0.10 sec||?|
|revcomplmt-50000k||31.77 sec||341.53 kb||4.13 sec||368.92|
|spectralnorm-500||0.15 sec||?||0.81 sec||16.04 kb|
|spectralnorm-500||15.72 sec||13.31 kb||44.45 sec||21.58 kb|
|spectralnorm3-500||0.15 sec||?||0.63 sec||17.08|
|spectralnorm3-500||15.71 sec||13.24||65.63 sec||21.68|