Tag Archives: jquery

The best Front-End frameworks 2022

React developer desk

It’s 2022, and it’s that question again which frontend framework to use? Are they maintained, production-ready, good learning curve vs benefit balance and active community? Let’s do a quick recap for the best of the best out there.

Photo by Oskar Yildiz on Unsplash

React
https://reactjs.org/
https://nextjs.org/
https://reactnative.dev/

I will put React in the number 1. The best of the best, and there are many reasons for that. First, because it has a vast community, simple structure, modular, component-based, and they also care about the world. They are a big supporter of Ukraine and the free world. That’s already alone is something.

What’s also very important with React and all the JavaScript (JS) based frameworks is that the learning curve and commons are very similar between the backend and the frontend. Also, React will let you build native mobile apps using React Native. So fewer code paradigms, similar codebase and a better understanding of each other’s code for various roles. Even though most of the developers are becoming full stack over time, thanks to these frameworks listed here, they can handle both backend and frontend code.

Also important to mention that React has Next.js for the backend. Quote from their web —

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

Honourable mention is also React alternative Preact. They still hold a strong position, but I’m taking it as an alternative and would still go with React. But they have done an outstanding job there https://preactjs.com/. Preact also supports Ukraine.

To read the full article, please go to my Medium post. There are more of that form the top 4.

This helpful article sums it up nicely to read more about last year’s trends.
https://2021.stateofjs.com/en-US/

To finish it up, I also wanted to mention some deployment and static web options that are important to be aware of on 2022.
https://vercel.com/
https://www.gatsbyjs.com/
https://www.netlify.com/

And of course, if you need marketing automation tools for 2022, then Mockup API from Mediamodifier is the best on the market. I’m affiliated with that one.

Mockup API
Mockup API

Do something when user click somewhere outside of wrapper

To close or do something when users clicks outside of some element following few lines of code can be helpful.

$(document).click(function(event) {
	if ($(event.target).parents().index($('#first_wrapper')) == -1 &&
		$(event.target).parents().index($('.second_wrapper')) == -1) {
		// Run something
	}
});

Most promising mobile UI frameworks

Simple list of some well known mobile UI frameworks you may want to use on your next mobile web project.

jQuery Mobile
Touch-Optimized Web Framework for Smartphones & Tablets

jQTouch
A jQuery plugin for mobile web development on the iPhone, Android, iPod Touch, and other forward-thinking devices

Sencha Touch
The First HTML5 Mobile Web App Framework

Jo
The simple app framework for HTML5. For iOS, Android, webOS, BlackBerry, Chrome OS & anything else with HTML5

iUI
User Interface Framework for Mobile Web Devices

SproutCore
SproutCore is an open-source framework for building blazingly fast, innovative user experiences on the web

Scroll to an anchor

Smooth javascript scrolling.


<script type="text/javascript">// <![CDATA[
		function goToByScroll(id){
     			$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
		}

// ]]></script>

<a onclick=”goToByScroll(‘1’)” href=”javascript:void(0)”>Go to anchor 1</a>

<div id=”1″>content</div>