What is the best front end technology for a search results page?

Question

Christian Quincy · Answer

1. Search is not a front-end function. 
2. AngularJS is not in the same category as node.js/ruby/jsp. You can put angular on anything.

Traditionally a user will type in a search field, submit via the search button. Once that search button is clicked the rest is up to the back-end (node.js(express?) /ruby(rails?)/jsp sever) via a query based on the search term to a resource which is traditionally a database of some sort (mongodb / sql ), then sends the results to the front end.

Which is better? I have no idea, so many variables (how big are the records? how many returned? Loading Images with results? ). I have fallen head over heels with the MEAN stack (Node.js / Express /  Angular /  MongoDB). I will say I'm not a jsp developer though and have not slept with ruby enough times to know her efficiency.

Node.js is just so easy and fun. Thats my pick.

David Quaid · Answer

A DIY search engine that would be somewhat usable should work like this. I'm modeling this on a model I built of Google [ https://primaryposition.com/seo-term-guides/seo-term-guides-what-is-google/ ] a few years ago. This is a good resource for beginner to intermediate SEO [ https://primaryposition.com/ ]’s.

Physical

1. Firstly, you need some servers. The amount will depend on how much content you p

Physical

1. Firstly, you need some servers. The amount will depend on how much content you plan to index
2. You'll need an internet connection
3. You should have a firewall
4. You should have a Web application firewall to protect your data
5. You'll need a load balancer for your application servers - both the web publisher and possibly your database servers
Applications - the search web application

* Note: most people think that search and ranking happen when you do a search. Its actually already done. To make search so fast, the search layer just returns the next 10 results from a list starting at position 1, and the only logic applied is (a) geo-specific pages are removed, (b) QDF checks pull in items based on a date and time range and (c) real-time data is pulled from a queue which has it ready to go
 * Essentially you want to break the HTML user interface from the business logic and the databases (the index)
 * I would imagine a 3 tier where you have a very basic Apache (or IIS) web application that lets a user enter a search query and then it fires it the search application which sends the results to another 2nd User interface. That way should there be peak demand you can basically disconnect the user operation servers from the functioning search server
 * The business logic layer - the "search" should simply have 2 functions
 * Function A - strip the search string in a query of non-value words (a, the, an, and, it, is) where each word is searched and a second query where its searched in different %'s of completeness. E.g. a search for "how much does an iPhone cost" would [much or does or iphone or cost] and also [much or does or iphone] and [much or does or cost]
 * The query is then handed to the next available search parser. The search parser connects to the next available database server. this is where load balancing comes in - if any single server becomes non-responsive, the load balancer just removes it from the queue and connects the next available healthy server
 * The parser requests the top 10 results with those words and is given a list of key IDs which each match a URL
 * The magic of rank order isn't established during a search - search is the final leg
Applications - Crawl List

1. You need a URL list, which you would need to mark with last crawled dates, time to crawl/page speed, robots and meta index allowed status
2. You would also want to store a rank and geo-location and a language identifier
3. Your crawl servers do the clever work
4. The crawl list is made up from a multitude of sources including: crawling and processing files and pages found on a server, inside a file (i.e. links from other pages), from URL's accessed by a browser, toolbar app, or a submit page on your search app
5. Lastly, you would store a list matrix of the pages that link to this page and a value of those pages which is in turn based on the number of links they have. you might also build in some kind of penalty/spam feature at this point
6. You would then have a realtime source list - e.g. news sites that you either allow a direct URL submit (e.g. look at pingomatic for WordPress: Ping-o-Matic! [ http://pingomatic.com/ ])
7. Remember submitted URLs save time - so if you have a trust indicator or protocol established, then trusted URLs would be auto-crawled super faster - because there is less time spent on discovery. Once you crawl it, you mark it as crawled, thus if the url is found during another process,, well, unless its refresh-by date hasn't passed it doesn't need to be recrawled.
8. You would then have a scheduler which would be a view or table of that data in terms of which pages and domains are prioritized first
9. You would need multiple crawlers if you were trying to index the web or a large piece of it
10. some servers will work on a dedicated list - when the list is complete they go back to the top
11. Other servers will kick off a crawl based on minutes hours or days - that way highly popular/authoritative or frequently used content is kept very fresh, and new pages are added and indexed quickly
12. Fringe content on lower authority sites could take weeks/months to be crawled. And that's a bit of a cheat but it works
Crawl and processing

* Each page then needs to be requested. The date stamp includes a start and end timestamp
 * Again, load balancing is helpful here because it can route the reply from the crawled server to a different process, essentially a HTTP file receiver. Because there are many slow servers and because many other servers become slow - due to hosting too many sites, network clogging, bad architecture, you don't want the crawl requester to be delayed - needs to send out billions of URLs across to web servers as requests. By divorcing the request and receive function you remove bottlenecks. The file receiving servers can accept lots of slow responsive servers because the data demand is low. Other servers can be separated for highly responsive servers because they will quickly reach maximum connection counts. Again, load balancers will distribute that between those servers based on weighting, round-robin, health checking
 * Another crawler will use good old fashioned server directory querying to see if the webserver exposes files and folder lists and it will create pseudo URL's and add them to the crawl list
 * I would guess that once the page is saved in a caching or staging area, multiple processes grab it rather than one large sequential processor. Sometimes you can see the impact of this when during one search, a result contains more information in its "snippet" than it did in a slightly earlier search
 * When a page is downloaded, either wholly or in part after a set timeout based on time and retries., all of the applications that scan, process, and index pages get stuck in
 * A language scanner will determine the language based on a dictionary lookup
 * the page is largely stripped of scripts and HTML formatting. The ones that are kept are ones you need for the purposes of determining relevancy. This might probably include the page title, the content (which is all text that isn't very script)
 * A key scanner type is one that would look for code and security flaws, malware and the like
 * I would imagine you would also have a spam scanner which request a copy and scan for very spammy type things
 * Another parser would build a searchable page - content stripped out
 * Each application works independently and some take longer than others (although this really is split second stuff)
 * Also, any javascript, non-html files, images etc automtically get blocked - even if the remote/client web server sends them - they routed to a different port which is essentially a Null or digital black hole.
 * I would imagine the servers that receive files will apply a process to present the HTML in a format that's low but provides the same basic minimum viable product to each sniffer or parser. For example -if it receives the %3Cbody%3E chunk - it might replace complicated words with simplified language. For example, it might replace every instance of motor-car, automotive car and car with just "car"
 * Again instead of just a queue, I would image that load balancer are able to set ordering based on the importance
 * You then have very big servers that you deploy either quickly behind or very far ahead of the curve of the growing amount of data you're planning to index (again, modeling on Google). These just process all of the lower-triage pages that arent flagged as highly important. Thus you can manage the frequency of very important content very acutely. If your QDF, news, twitter feed - high volume content represents 10% of content and then suddenly spikes, you just take another 5% of your "generalist servers" and route them until that spike point is over. If the total time to refresh is on average 3 weeks and then one day you notice that the longest refresh was 5 weeks, then you just need to add in an extra 20% capacity at some point. You're not adding it in immediately because your instant indexing servers have auto-scale
 * Auto-scale gives elasticity to ride out demands - and that's why you break components into non-asynchronous processes that don't rely on each component to finish. You build out work queues based on the smallest set of procedures that have to be completed in the same order, the very minimalist list you can.
 * Another example would be a URL sniffer that also requests a copy of the page. Firstly, it will take the URLs and then add that pages KID to records of the URL's it links to, based on say an industry-agreed standard like nofollow, which will prevent that KID from registering as a link. The sniffer will also look at the anchor text in that link. Whether or not that page has that text, the sniffer will record it in an index of relevance. A separate thread or process will query based on a synonym dictionary
 * and then magic happens - an indexer will then list that urls Primary Key in all of the lists. Imagine a list called "iPhone" and in it are every page in the world with the word iPhone, a count of how often it appears, what countries its relevant to, what language it is. based on whatever signals your algorithm needs, you then immediately score that page
 * The page is also added to another similar-sounding/meaning indices
 * Remember, at this point, your index copy of the web is just hundreds of single word tables: car, book, iphone, pen, mouse, dell, server, kemp, load, balancer
 * Some indices will span spelling mistakes and if a query for balancer comes in, it runs off the same one as balancing or you can keep them separate and score the pages higher or lower depending on which version of that word is more or less relevant. I would imagine Google started with this and now have a hybrid version where some are collapsed (joined together) and others are separated
The results application

Each query processed will be assigned to a result set. the input into this is the query phrase, the country and whatever personalization settings it needs to know. The results from the index are then re-prioritised accordingly.

Ads Server

An ads server will list the KID's of any ads and the targeted keywords and negatives. When the query is passed to the results server, the ads server will get a copy of that request and give HTML back to the Result Application Web server which gives a HTML page back to the user with the organic and paid results. All of that is done in 0.0001 seconds or faster if possible

Jayesh Lalwani · Answer

The core of a search engine is a reverse index.

So, let's imagine the web as a a hypothetical database. You can think of the web as a 2 column table: URL and page contents. URL contains the URL of a page, and page contents contains it's contents. URL is the primary key. You type in the URL in your browser, the browser looks up by the primary key in the database, gets the row and shows you the page content. Good, right?

Well, not good for search! Why? Because if you are searching for pizza, you will have to go through all the records and scan the page content column of every row for the word pizza. Bad, no? It has a performance of O(n), and when you are talking about the web, that n is going to get big.

So, what do you do? You flip this table around. Make the page content the key and the URL the value. Not only do you do this, you split the page content into individual terms, and create a record for each term.

So, let's say, you have 3 very small web pages that say

1. http://yummypizza.com - Italian Pizza
2. http://yummierpizza.com [ http://yummierpizza.xom ] Sicilian Pizza
3. http://sexyshoes.com-  Italian Shoes

Our table now looks like this

[code ]Italian - http://yummypizza.com, http://sexyshoes.com
Pizza - http://yummypizza.com, http://yummierpizza.com
Sicilian - http://yummierpizza.com 
Shoes - http://sexyshoes.com[/code]

Now, when someone searches for Pizza, you simply look up the record for Pizza and you get both the web pages. Fastest search engine in the world, right? All it needs to do is look up one record. There, you beat google!

But wait!. What if someone searches for Italian Pizza? Ooooh. What you can do is find the URLS that are common between the first entry and second sentry. Mathmetically speaking, you are performing a intersection of 2 sets. So, you need some sort of algorithm that can do a fast intersection across large data sets
Now, you got it. Buy a few thousand servers, beat google at it's own game. Yeah!

But, wait! what if someone searches Italy Pizza? You want Italian pizza to show up right? oooh
So,  you need to expand your terms using synonyms. Essentially, you need a dictionary of synonyms (words grouped together by meaning). Then when you insert records into a row, you insert the records into it;s synonyms. So, your table looks like this

[code ]Italy - http://yummypizza.com, http://sexyshoes.com
Italian - http://yummypizza.com, http://sexyshoes.com
Pizza - http://yummypizza.com, http://yummierpizza.com
Sicilian - http://yummierpizza.com 
Shoes - http://sexyshoes.com[/code]

Now, you ready to beat Google! Are you looking for investors? because I'm there!

But wait, what if someone searches I want  Italian Pizza. and your web page for Italian pizza doesn;t have the words "I want ". Well, it doesn;t make sense to search for "I" and "want", right? So, you need to chuck out some words from the input. These are called stopwords. So, "I want Italian Pizza" becomes "Italian Pizza". All you need is a dictionary of stopwords. You can even use this to stop people from searching by bad words

Ready to beat Google? Angel Investors all lines up?

No wait. People make spelling mistakes. There are algorithms that convert words into codes based on how they sound. You can convert all the terms into soundex code, and convert your search term into soundex. If you don't have enough results when you search without soundex, you fall back to soundex

Great! Now, I'm ready to rule the world!

But, wait, what about ranking? When you are talking about showing millions of results, what you show as the first result matters. So, how do you sort them. Alphabetically? lame! Sorted by time? lame! Or how about if the word Pizza comes up more times in the web page you rank it higher? (And then SEO people will fill the page with PIzza Pizza Pizza Pizza... Anyone remember the days when SEO experts will ask you to put bunch of shit in your page )

You can't just let the user pick his/her own sorting! Because resorting millions of will kill your server. So, you come up with your own way of sorting the results and you physically store the records in that order. This means that you can read your column partially and you don;t have to sort on every search.

This is where you can;t beat Google, because of Google's pagerank algoithm. That's proprietary, and that's Google's secret sauce

Of course, you might not want to compete with google. You might be building a search engine to search through your library of kindle books, right? However, the core problem of algorithmically ranking search results is very hard to nail down. You might find that how you rank depends on what you are searching. This where most search engines have trouble with. And that's why Google basically beat every other web search engine

BTW, you don't have to implement all this yourself. Solr which is built on Lucene provides all of this. You need to provide the data and decide how to rank your results.

Jérôme Cukier · Answer

In smaller tech companies, it makes sense to have one single approach for all web apps be them internal or public facing. However at Google that ship has long sailed, there are hundreds of products (so public facing) and i don’t know how many internal pages and many different technologies at play.

So there are many tech stacks used at Google.

The two most common one are Angular and an internal, non-

So there are many tech stacks used at Google.

The two most common one are Angular and an internal, non-open source framework. Angular is also mostly used for internal tools. There are (at least) 2 flavors of Angular at Google, ACX which uses Dart and your more typical Angular with TypeScript. ACX is (or at least was) used with ads products.

Most large web properties and some internal tools use the non-open source framework, which is optimized for very fast initial loading time for heavily trafficked web sites. The public version of this framework is called the closure templates [ https://github.com/google/closure-templates ], and the general idea is that you have a backend that is going to generate server-side these templates that the client can render super fast. At google these backends are usually written in Java or C++, and the client would be in TypeScript. The open source version of this framework has almost no traction even though this powers all the big Google web properties.

Google search, though, uses its own stack - google web server [ https://en.wikipedia.org/wiki/Google_Web_Server ] or “gwis” which afaik is not used anywhere else.

Flutter and Lit, despite being born at Google and picking up some usage in the outside world, are only used anecdotally inside of Google. There is (or at least was) a few uses of React and Vue. There’s also very little javascript (vs TypeScript) used in production.

ChatGPT · Answer

Choosing the best front-end technology for a search results page depends on various factors, including project requirements, team expertise, and performance considerations. Here are some popular front-end technologies and frameworks commonly used for building search results pages:
1. React
 * Pros: 
 * Component-based architecture promotes reusability.
 * Strong community support and a rich ecosystem (e.g., libraries like React Query for data fetching).
 * Virtual DOM for efficient rendering.
 * Cons: 
 * Requires a build setup (e.g., with Webpack or Create React App).
2. Vue.js
 * Pros: 
 * Simple and flexible, making it easy to integrate into existing projects.
 * Two-way data binding and a reactive component system.
 * Good documentation and community support.
 * Cons: 
 * Smaller ecosystem compared to React, but still robust.
3. Angular
 * Pros: 
 * Complete framework with built-in tools for routing, state management, and HTTP requests.
 * Strong TypeScript support, which can improve code quality.
 * Cons: 
 * Steeper learning curve compared to React and Vue.
4. Svelte
 * Pros: 
 * Compiles components into highly efficient vanilla JavaScript at build time, leading to fast performance.
 * Simple syntax and reactivity model.
 * Cons: 
 * Smaller community and ecosystem compared to more established frameworks.
5. Next.js
 * Pros: 
 * Built on React, providing server-side rendering and static site generation.
 * Excellent for SEO, which is crucial for search results pages.
 * Cons: 
 * Requires understanding of both React and the Next.js framework.
6. Alpine.js
 * Pros: 
 * Lightweight and easy to use for adding interactivity without a full framework.
 * Ideal for simpler pages or when you want to enhance server-rendered HTML.
 * Cons: 
 * Less suitable for complex applications.
Key Considerations:
 * Performance: Consider technologies that support efficient rendering and fast data fetching.
 * SEO: If SEO is a priority, frameworks like Next.js or Angular (with server-side rendering) are beneficial.
 * Team Expertise: Choose a technology that your team is comfortable with to ensure productivity.
 * Scalability: Think about how the technology will handle increased traffic and data as your application grows.
Conclusion
For most applications, React or Next.js would be excellent choices for building a search results page, especially if you need a dynamic and interactive user experience. If you prefer a more opinionated framework with built-in features, Angular could be suitable as well. Ultimately, the best choice depends on your specific needs and constraints.

Smit Patel · Answer

Your website design will be essential for all types of organizations in 2023. Therefore, concentrate on creating a responsive website that may convert visitors into paying clients. A well-optimized website will encourage users to stay on it longer, which is important given the growing amount of consumers and businesses that are going online.

We do, however, understand the process a developer uses to design, manage, and maintain a website, making sure the functionalities are straightforward and the aesthetics are excellent. To create responsive websites and prosperous e-commerce firms, there are numerous top SEO-friendly technologies available.

How to Create a Responsive Website – 6 Crucial Website SEO Technologies

1. CSS and HTML

2. Frameworks – Javascript

3. ReactJS

4. Vue.js

5. Angular

6. Backbone.js

7. AMP CMS

8. Low-code and Web Development

Advantages of SEO Technologies for Web Development you must know

1. Cross-platform compatibility

2. Adding new tools and technologies

3. Enhance capacity

4. Affordable and free to use

5. Web technologies give adequate protection

6. SEO-friendly website

7. Bring versatility to your website

For a better client experience, today all businesses desire to have straightforward, less complicated websites. Therefore, when planning your next development project, think about using SEO-friendly technology. [ https://digitalfunnel.ie/seo-technologies-to-build-responsive-websites-in-2023/ ] Today, every SEO agency should be aware of the benefits of expanding their knowledge and acquiring a new language. Being current and utilizing these web technologies to develop an SEO-friendly website can provide your website a significant competitive advantage because modern trends change so quickly.

Rijwan Khan · Answer

Basically frontend development is whatever we see when we go to any website or app. Think of it as the outer look of our body.

Here is 6 month roadmap to learn frontend according to currently trending technology -

Month 1: Building the Foundation

1. HTML Magic: Learn the language that powers every website. Create structures and bring your ideas to life.

2. CSS Wizardry: Master the art of making websites visually stunning with styling and layout techniques.

3. UI Magic with Bootstrap: Dive into the world of responsive design and leverage the power of Bootstrap for rapid UI development.

Month 2: Supercharging with JavaScript

4. JavaScript Wizardry: Dive into programming fundamentals, conquer variables, loops, and conditions.

5. DOM Mastery: Gain the power to interact dynamically with web pages using JavaScript.

Month 3: Powering Up the Backend

6. Node.js Adventure: Step into the world of server-side JavaScript and build your own applications.

7. Express.js Exploration: Create robust web apps using the coolest Node.js framework.

PS - backend is optional but one should know how it works.

Month 4: Unleashing the Frontend

8. Introduction to React.js: Enter the realm of modern web development with the powerful React library.

9. React Components: Master the art of building reusable UI elements like a pro.

10. Styling with Tailwind CSS: Harness the flexibility and utility-first approach of Tailwind CSS for stylish web designs.

Month 5: Harnessing Advanced Techniques

11. State Management with Redux: Tame complex application states effortlessly using Redux Toolkit.

12. React Router: Learn how to navigate through different sections of your app with ease.

13. Material UI Magic: Explore the sleek and customizable UI components of Material-UI to create stunning user interfaces.

Month 6: Conquering the Next Level

14. Advanced React Patterns: Dive deeper into React's advanced features, including hooks and context API.

Deployment & Hosting: Get ready to launch your web apps into the real world!

PS - I am also starting a batch of 30 students where I will teach them all these and much more. Don't let financial instability hold you back! Enroll now and let us help you unlock a prosperous future through the power of web development! 💪🌟

Steve Baker · Answer

So when you access a web site, there are really two parts to the process.

* The Back End - is the processing that goes on in the remote web server computer where the files and data are stored…and shipped down to your computer via the Internet.
 * The Front End - is the processing that happens in your computer/phone when data arrives from the Back End. This stuff happens in the Web Browser - Chrome, FireFox, Explorer, etc.
In the world of web site development - there are experts in back-end programming - experts in front-end programming - and people who are able to do both jobs - who are described as “full-stack” developers.

Development of Front End software happens mostly using:

* HTML - the language that describes how data is displayed in a browser window.
 * CSS - a convenience system that makes managing the appearance of complex HTML web pages a little easier.
 * JavaScript - a programming language to describe the behavior of the web page.
Those three things are really “Must Know” stuff for front-end developers.

Additionally there are things that you at a minimum need to be aware of:

* Frameworks…there are a dizzying number of “frameworks” which are software packages that make putting together JavaScript and back end stuff easier. These things seem to come and go according to fashion and staying up to date with today’s trendy frameworks is a nightmare.
 * Canvas Graphics - although technically a part of HTML - it’s more or less a separate thing of it’s own.
 * WebGL - A way to unleash the phenomenal power of the GPU from within a web browser. This is the key do doing amazing 3D and 2D graphics within a browser.
 * WebAssmbly (aka WASM) - A way to write full-function software in languages like C++ and run them within a web browser. This really unlocks the “Browser as an Operating System” concept. It’s really a major change to the range of things you can do in a browser window.
 * XML, JSON and SVG - are all data file formats that are commonly used in the Front End.

Branko Dodig · Answer

I did that at my first job at the local university, from the ground up, in C, under Linux. Technology stack? Eh!

I have to say this: building it from scratch is a massive pain in the ass. The best way to make one is to buy a large bottle of Rakija, drink shots to unconsciousness and then forget about the idea.*

On the other hand, it is a learning experience and is fun in a way. In a nutshell, you got this:

* Web spider, which will start with some links, parse pages and find more links, and also store downloaded pages. It will also not be a DDOS machine.** Basically you have one controller program sitting somewhere on the network (it is in effect a server) which does the bookkeeping of what links you’ve traversed and which ones you still have to do, and clients (worker programs) which ask it for links to download and parse, which send back the status and all the new links they have obtained from the downloaded webpages. Easy.*** What could possibly go wrong?**** Oh, and you can and should do rudimentary ranking of pages themselves during this step, when you’re already analyzing links, and also give a penalty for pages which seem fishy one way or another.
 * Now you have, like, tons of shit downloaded from the internet scattered over the network. That’s very helpful. Okay. Let’s assume that, like mine and unlike English, your language has 11ty suffixes to every word which slightly modify the meaning. I mean, in English the word “fuck” has perhaps “fucking” and “fucked”, so if you treat it like three words it actually makes sense in a way. In Croatian the same word has 7 forms (actually, 10, come to think of it, but one is kind of archaic) and there are words which are far worse. You get much better results if you collate all forms of a word to the same root, especially for searches with not many hits (then give a bonus to the exact form the user was looking for after, I think I did******) for purposes of searching. In this way I actually did get better results than Google for the Croatian language. OK, why all this? Well, if we want to do it this way, and it has significant merits for fucked up languages, there’s only one way to do it, which is to do the processing in two passes. It’s also fast that way, which is a good thing.
 * Pass one, you go through all the data and construct both a dictionary of all root forms, all derivative forms, and turn the webpages into actual numerical data what words are there and at what location***** (this is important because shit in the start of the page matter more than on the 20th page). You can also do a bit of guesswork and guesstimate to which root do mispelled words belong to, which I vaguely remember doing. Of course since all your data is sitting around on the network somewhere we’re doing it in the same client-server architecture like we did initially, the dictionary is central this time but data stays where it is.
 * Pass two, you construct a index. Imagine a big table where the rows are words. So every word has the list of IDs of webpages where the word shows up along with some rudimentary data (like, where does it first show up, how many occurences are there and you actually do a bit of rudimentary calculating how good this page is as a result for that specific word). There might have been something else to it, I don’t recall, but it was more or less the simple part. Also reusing same client server architecture from before, except now it’s the index which is central and held by the server. There was something horribly complicated here which I cannot recall. Possibly something to do with caching.*
 * Now we code a server which will answer queries posed by users through your webpage. It’s going to take the list of hits to your query and rank it. First time you’re going to wait like a part of a milisecond because it has to actually do it, subsequent times you just return an answer from cache. You can win a lot here by caching because you know that “how to code a search engine from scratch” might happen, like, once per day, so nobody cares if you actually have to search for it, but “biggest tits” is going to come up a hundred times per second and you better serve them on a platter. So why do we rank them only here? Well, obvious complication is that someone will invariably look for “biggest tits” instead of just “tits”. Douchebags. So, that’s why we didn’t rank it in the index construction step, because if we sorted it then, now we’d have exploding complexity instead of going through n+m entries like a boss. So, anyway, we go through all the entries for “biggest” and “tits”, rank it and return the best when we’re done (or, optionally, you could do it “when it’s good enough”). Ranking involves some tricky bits, but I looked at, in short, number of occurences of the searched word, first place of occurences, whether the occurences were close (because the phrase “biggest tits” is a pretty good indicator that the webpage is indeed about biggest tits), what’s in the webpage adress and title, a link ranking scheme (done during the first step), whether your page seemed fishy and this and that. There were more pain in the ass bits here like extracting a snippet (that’s why we have a location for first or maybe first and second occurence of the word in the database) and other muck I can’t rightly remember now.
That’s it, basically.

It’s also the only technical paper I published before moving on to other things.

The design has obvious flaws including scalability if you really moved on to, well, trying to imitate google on anything else than a dataset of a small country. It must’ve been some ten years and something ago now.

*The worst way to make one is to buy a large bottle of Rakija, code mission critical routines while drinking shots to unconsciousness and then forget about it.

** Yes it will. Ha ha.

***Of course, you will have to make the search for links in the controller program efficient as hell (or perhaps do a pre-screening on the worker programs, I have not thought of that) because it will be repeated very often.

**** Parsing HTML for links in a way you swallow all the non-standard crap people put online, that’s what. It was supposed to be such a elegant state machine according to HTML standards. Hah… by the end of it, it would swallow everything.

***** I think I only recorded at what location does the word first or first and second appear to save space and time.

****** Since that was resource intensive, as I didn’t think of it properly in advance, I vaguely remember I kinda cobbled it post hoc to do just a sort of minimum effort search without impacting computational demands significantly.

Onufry Wojtaszczyk · Answer

Angular. JavaScript. TypeScript. And, you know, HTML and CSS :)

There’s probably other stuff in other places as well, but I think Angular is the most popular framework at Google (not surprisingly, since it’s a Google framework).

AwaisAkbar · Answer

Look, if you're just starting with front-end development:

1. Begin with HTML and CSS: Start by learning the basics of HTML and CSS. Choose between Tailwind or Bootstrap for styling—it's up to you.
2. Move on to JavaScript: Learn JavaScript to add interactivity and dynamic features to your websites.
3. Explore Frameworks: Once you're comfortable with JavaScript, check out frameworks like React JS, Angular JS, or Vue JS.
Taking it step by step helps you build a strong foundation and gradually move to more advanced tools and frameworks for creating modern and interactive web applications.

Orest Hudziy · Answer

2019–2020 statistics have approved that JavaScript is the most favored programming language to ever exist. And the reasons are numerous: from its scalability, fast performance to having an impressive community and being easy to get started. According to Wikipedia, currently there exist 24 JavaScript frameworks and 83 libraries. In today’s article, we will encompass and compare 5 of the most popular JavaScript frameworks.

React.js

React is a library, not a full-fledged framework that makes it one of the simplest frameworks to learn, especially if to compare with its constant rival — Angular.

React

React.js

React is a library, not a full-fledged framework that makes it one of the simplest frameworks to learn, especially if to compare with its constant rival — Angular.

%3E React.js has been an unchanged leader among top JavaScript frameworks to use, taking the first place with the number of dependents and downloads according to Node Package Manager. The community of this Facebook-created framework is rapidly growing and in 2019, React gained 22.9k stars on GitHub.
The main focus of React is the building of UI of a single page web app and mobile app. The exceptional performance is achieved gratefully to the virtual DOM characteristic of React.

React is the choice of Facebook, Twitter, Instagram, Whatsapp, Uber, and many others.

Angular

Angular comes from previously written in TypeScript and elaborated by Google, Angular. This is a component-based framework that possesses an extremely strong typing system that enables it to statically analyze the code and build dynamic web and single-page applications.

Mastering this framework is difficult and time-consuming due to its MVC architecture.

%3E Recently we can witness a decline of Angular popularity with 12.0k stars gained in 2019, therefore, taking the twelfth place on GitHub 2019 JavaScript Rising Stars. Node Package Manager certifies 21,980,106 downloads which is much less in comparison with React and Vue.
Angular is used by Google Gmail, Sony, HBO, and General Motors.

Vue.js

A relatively new framework that is widely gaining popularity and is even predicted by some to overtake React. Vue.js is very fast due to being a component-based and visual DOM, and light (around 80kb, while React is around 100kb).

Evan You, the creator of Vue.js, managed to make the framework flexible and easy to learn with no restrictions on how to build an application. It’s used in various cases: from single-page apps to PWA.

The popularity it has gained is striking, especially taking into account the absence of large companies’ mentorship.

%3E Vue.js earned the biggest number of GitHub stars in 2019 (31.4k) and takes the second place as to the number of downloads after React on Node Package Manager statistics. Vue. js has become a choice of Grammarly, 9Gag, Gitlab, and Xiaomi.
Svelte

Svelte is a new revolutionary approach to building web applications that generate code to operate the DOM. It can’t be named a simple framework but a component one compiling components at the build step.

There is no need to master Svelte from a scratch: you write components using HTML, CSS, and JavaScript, which are compiled into small separate JavaScript modules. That demands very little browser processing and makes code fast and simple.

%3E Svelte takes fifth place on GitHub JavaScript Rising Stars  [ https://2019.stateofjs.com/front-end-frameworks/svelte/ ]report with 20k stars and 45% of developers that admitted their will to learn [ https://2019.stateofjs.com/front-end-frameworks/svelte/ ].
Ember.js

Ember.js is an open-source, component-based framework with astonishing architecture, based on the MVC model.

The learning curve is steep and time-consuming because of its inflexible structure. Though, once it’s mastered, it can be used to fulfill the demands of very complex web applications.

Even though being developed a long time ago, it has never won much popularity.

%3E Node Package Manager: 71,032 downloads a year, GitHub: 982 stars. Ember. js is used by Apple, Netflix, and LinkedIn.

Wrap up

The following numbers are taken from the Node Package Manager.

The world of front-end is vast and full of opportunities for development and even the most choosy person will find the framework that will meet all their requirements. Don’t keep your focus confined only to our top 5.

Vishal Vishwakarma · Answer

Hi,

For creating front-end you should go for Bootstrap framework .

It is the best in the web world currently.

The Advantages of Bootstrap Development are:

1. Fewer Cross browser bugs
2. A consistent framework that supports major of all browsers and CSS compatibility fixes
3. Lightweight and customizable
4. Responsive structures and styles
5. Several JavaScript plugins using the jQuery
6. Good documentation and community support
7. Loads of free and professional templates, WordPress themes and plugins
8. Great grid system

DigiMantra · Answer

1. Node.js
2. Django (Python)
3. Ruby on Rails (Ruby)
4. Flask (Python)
5. Express.js (JavaScript)
6. Laravel (PHP)
7. Spring Boot (Java)
8. Flask (Python)
9. FastAPI (Python)
10. ASP.NET

Josh Begleiter · Answer

I think to answer this question we should start with the abstraction that we often refer to as a design pattern, and in this particular case the design pattern “MVC”. This stands for Model, View, and Controller, and in many contexts the front-end is the “View” (what the user sees), the back-end is the “Controller” (what does the work), and the database or other permanent data store is the “Model” (what stores the information for later). I like to build middle-out meaning that I first consider what my application needs to DO (like, log in users, or update account information, or run queries, etc.), and then build out the business logic that it will use to accomplish this. In doing this, it helps me define what I need to store (the model), and how the front-end will interact with the back-end. Now, going into great detail on how the front-end and back-end are integrated.

The View takes many forms, but at its heart, on the web, it is HTML, JavaScript, and CSS. A given view (like your homepage, or accounts page), or a partial view (perhaps your header, or footer) may be integrated to your framework (as with ERB templates in Ruby on Rails, or Django templates in Django), or it may be entirely separate (and potentially written with a front-end JavaScript framework, like Angular, or Backbone, or Ember).

This means that in the former example, where a view is integrated with the framework, as a request is made to the back-end (I’ll come back to this later), what is returned is HTML that has been pre-rendered by the back-end engine, that may or may not use values from the controller, and can even do logic using the templating language (like ERB templating for Ruby on Rails or Django templating in Django, as above). In the latter example, everything is HTML, CSS, and JavaScript (potentially with a JavaScript framework), and this changes the way that the back-end returns data to the front-end.

Now, for the important part: how does the front-end really communicate with the back-end? The front-end always makes a call, meaning a GET or a POST request generally. A call can be made actively, by a user clicking on a link, in response to some event (in JavaScript), or passively (on a timer, also in JavaScript).

A GET request is one that has all of the values that it will pass to the back-end in the URL itself (like [code ]mywebsite.com/someservice?somekey=somevalue&anotherkey=anothervalue[/code]). In this example, when the call is made it makes a get request to the “someservice” endpoint of your back-end and has passed the parameters “somekey” and “anotherkey” with values “somevalue” and “anothervalue”.

A POST request is one that has all of the values it will pass to the back-end encoded in the request body. In this case you would invoke [code ]mywebsite.com/someservice[/code], but the values would encoded in the request body itself. This happens whenever you fill out a form, in which case the request body is multi-part form-encoded content. This too can be done actively (e.g., a user submits a form), passively (e.g., the form is submitted in response to all fields being filled out), or on a timer (e.g., the front-end checks the back-end for some value in the form and validates it using the back-end every 5 seconds).

And this is the meat of the answer: a call is made from the front-end to the back-end through either a user interaction with the page, listening to an event in JavaScript, or using JavaScript as a timed event. In all three cases we have a choice: will the request by synchronous, or asynchronous? Synchronous typically means that the user makes a request and waits for the response. Asynchronous typically means that the request is made in the background, and the page (or elements of the page) are updated when the response from the request is received. Asynchronous requests are all done through XML HTTP Requests (XHR), which you can do using plain JavaScript or any JavaScript framework (even jQuery makes this very easy).

The next big question is, how does the back-end, once it receives a call from the front-end, know what to do with this information? What happens is this: a back-end receives a call from the front-end (as above, we’ll use the GET request as the example), and it takes apart the request, classifying the following:

* It’s a GET request
 * The domain is [code ]mywebsite.com[/code]
 * The port is 80, for http, or 443, for https (by default)
 * The endpoint is “someservice”
It then takes that information to route the request appropriately, passing the request body as well. What do I mean by route? Let’s assume the back-end is set up in a typical way, with a web server (like Apache or NginX), and an application server (like Passenger or uWSGI, which would mount and provide the gateway to a Ruby on Rails or Django application respectively). The web server takes this information and, assuming it knows the host and the port, and the resource is allowed, will pass on the information to the application through the gateway.

When the application receives the call it too needs to route the request appropriately, which is where “routes.rb” and “http://urls.py” come into place (for Ruby on Rails and Django respectively). These files say: if a request matches a given pattern (endpoint, request method, and potentially arguments, typically), then the router should route the request to a given controller and action (often a method within a given controller).

When the controller receives the request, finally, it comes complete with the request body, so all of your passed keys and values are present. The controller action (your method in your controller) then does the “business logic,” potentially communicating with a database (to store or read information), or doing some calculation, etc. What’s important about the different ways of making a request (synchronously or asynchronously) is in two parts:

1. What does the back-end return? XML, JSON, or HTML typically, and a single method may return any one of the three depending on how the request was made. This is what “responds_to” does in Ruby on Rails, when dealing with an asynchronous request. Render, and redirect, are the statements we use in Ruby on Rails when we wish to render a view or redirect to another action. This is also something we’ve typically decided through architecture, in deciding whether or not our front-end is integrated as a template in our back-end, or not. When a front-end is integrated as a template, we may be returning a view (rendering a view), in which case we pass on values to that view, the back-end engine renders it all as HTML, and it is then returned to the consumer. When we’re receiving an asynchronous request, our controller must return XML, or JSON, or HTML, depending on how the front-end will receive and interpret the results. A good example of this would be in making any long-running request (like a large database query): the consumer doesn’t want to wait to get a request, it’s likely that their browser would time out before the response is returned. As a result, the request would be made asynchronously, and either the user could remain on the page and wait for an update, in which the back-end returns a block of HTML, or a JSON object representing the query results, or a timer could be set up on the front-end to listen for such an event, probing the back-end periodically.
2. This brings us to the second part for making a request: what does the front-end do with the returned data? When making a synchronous request, it renders that data (necessarily), meaning it shows a whole page typically, like when you log into a service and are “forwarded” to your account page. When making an asynchronous request, the front-end has to decide what to do with the results. It may take those results and render them to the page in a particular spot (like the query results above); it can do anything as a result of or using the response from the back-end.
Let’s add in a quick example, step-by-step, for the scenario where user visits your homepage:

1. The user types in your website to their browser URL bar and hits enter, making a GET request to [code ]mywebsite.com[/code]
2. The back-end receives this request, and knowing the domain, port, method, and endpoint (“/”), it passes it to the application
3. The application receives this request, and knowing the endpoint and method, it passes it to the correct controller action (we’ll say Application controller and home method)
4. The application controller home method simply renders the HTML associated to the home page as a view, passing back to the consumer rendered HTML
5. The browser interprets the HTML, and the user sees the homepage
Let’s do a second scenario, one where we make a query using a form and then the results of that query should be rendered to a text box on the page some time later:

1. The user enters information into a form related to their query (maybe date ranges, or IDs, etc.), and hits the “submit” button
2. JavaScript (that you’ve written) captures the event (prevents the default from occurring), wraps up the request parameters, and makes a POST request asynchronously to your endpoint (we’ll say [code ]mywebsite.com/query[/code])
3. The back-end receives the request, and knowing the domain, port, method, and endpoint (“/query”), it passes it to the application
4. The application receives this request, and knowing the endpoint and method, it passes it to the correct controller action (we’ll say Application controller and query method)
5. The application controller query method needs to do some business logic to start the query and provides a query ID, which it then returns to the front-end as JSON (e.g., [code ]{‘query_id’: 1234}[/code])
6. The front-end receives this response through the asynchronous listener you wrote, and sets up a timer to listen for query completion
7. The front-end uses JavaScript (that you’ve written) to make a POST request to the back-end every 5 seconds, (we’ll say, [code ]mywebsite.com/queryresults[/code]), passing the “query_id” we received in the previous step as the request body
8. Once again, the back-end routes the request appropriately, this time to a controller action that asks if the query is done yet (I won’t go into detail on the how of this today)
9. 
1. If the query is done, the back-end returns the results as JSON, e.g., [code ]{'query_complete': true, ‘query_results’: ‘somequeryresults’, 'success': true, 'msg': ''}[/code]
2. If the query is not done, the back-end returns the same structured JSON but with different values (note that you don’t need to maintain the structure, but again I won’t go into the why of this now), e.g. [code ]{'query_complete': false, ‘query_results’: ‘’, 'success': false, 'msg': ''}[/code]
3. It could also return an error message using the structure above, where query_complete is true, but success if false, and a message accompanies it in the msg parameter.

10. Once again, the front-end must decide what to do with the results:
11. 
1. It does nothing with the results if the query isn’t done yet
2. It renders the results in the appropriate place if the query is completed successfully
3. It tells the user there’s an error when the query has failed, for whatever reason

Hope this helps!

Saib Safdar · Answer

Determining the single "front-end technology stack" for Google is tricky, as they use a vast array of products and services with diverse needs. However, here's an overview of some prominent technologies in their front-end landscape:

JavaScript Frameworks:

* AngularJS: While Google heavily promoted AngularJS in the past, its usage seems to have decreased in recent years. It might still be present in older, internal projects.
 * ReactJS: This highly popular framework is gaining traction within Google, even appearing in some core products like YouTube.
 * Polymer: Google's own web components library can be found in various applications, particularly for reusable UI elements.
Other tools and libraries:

* HTML, CSS: These foundational web technologies remain ubiquitous across all Google's front-end development.
 * JavaScript: Used for interactive elements and advanced web features.
 * Web Components: Google champions this standard for building reusable UI components, promoting it through Polymer and adopting it in various web experiences.
 * Progressive Web Apps (PWAs): Google embraces PWAs for offline functionality and mobile-first experiences.
 * Internal tooling: Google likely utilizes custom build tools and internal frameworks for specific needs and efficiency.
Additional points to consider:

* The technology stack varies significantly across different Google products and teams. Some might rely heavily on frameworks like ReactJS, while others could have their own bespoke solutions.
 * Google actively contributes to and adopts open-source technologies, influencing the broader front-end development landscape.
 * The stack constantly evolves as Google experiments with new tools and frameworks.
Overall, Google's front-end technology stack is diverse and adaptable, prioritizing performance, scalability, and developer experience. While certain frameworks like ReactJS seem to be gaining favor, it's crucial to remember that the specific technologies used depend highly on the individual project and its unique needs.

Emesha Cults · Answer

In today’s developing world and technologies, the gap of Front end and Back end is being filled by Fullstack development. The innovations in the JS field has led to the emergence of such developers who can create both ends of the application. There are different tech-sets in Fullstack development. One such in MEAN (Mongo, Express, Angular, Node.JS) these all are the combo pack which helps in creation of complete web app. Job Search Websites/applications created using such technology are fast as the database is refined and the search queries could be operated fast irrespective of the database. Many popular job hunt websites are currently working on these technologies and I would suggest to get the work done keeping same tech-set in mind.

Parth Parmar · Answer

It depends on whom you ask and the technologies.

What is frontend development?

It focuses on what the user will see on your website, frontend development means to develop website looks, feel, and having interactivity for the end-user.

What technologies does it include?

HTML, CSS, and JavaScript are the main building blocks of frontend development.

As we include all different kinds of libraries and frameworks that are built with JavaScript, it becomes much more than just HTML, CSS, and JavaScript.

Scenario 1: Person knows nothing about programming

If the person knows nothing about programming (or even HTML), it would be difficult to learn it from scratch.

Scenario 2: Person knows somewhat about programming

This would be a bit easier compared to the first scenario, of course, it still would take time to learn new frameworks as libraries.

Scenario 3: Person is an experienced programmer

If you already know to program or are a web developer doing a job, it would be much easier for you to learn new technologies and use them.

I had learned VueJs in just 3 days.

Now, let's talk about technologies.

HTML & CSS (Including bootstrap and tailwind)

HTML and CSS are easy to learn as well as Twitter bootstrap, However tailwind could be a bit difficult as it is not a fully featured framework out of the box.

Angular

Angular has a steep learning curve and is a full-featured framework from google.

It is over-engineered in my personal opinion.

React & Vue

These are easier to learn compared to Angular, I have not used React much but I have had used Vue and I’m very impressed by it.

Kritika · Answer

When it comes to developing SEO-friendly websites, React JS is a popular choice among developers. However, many developers have the misconception that React is not ideal in terms of SEO. But it isn’t true! Wondering how to improve SEO for React websites? In this article, you will explore the vital facts and figures that will convince you to build SEO-friendly websites with React JS. Let’s dive in!

Moreover, React JS is an open-source JavaScript library that helps build highly responsive UIs. It comes with several reusable components. Therefore, creating complex UIs is simple, quick, and easy. The short development cycles make React JS a top choice among professional developers. Moreover, the framework is easier to learn in comparison to Angular. The availability of extensive guides and documentation helps reduce the learning curve and allows developers to build websites faster.

For more detail visit :

https://thememiles.com/blog/seo-friendly-website-with-react/

Golden Byte · Answer

While React.js currently holds a dominant position in front-end development, the landscape of web frameworks is dynamic, and it's possible that new frameworks or existing ones could rise to prominence in the future.

Here are some frameworks and technologies that have the potential to challenge or complement React's dominance:

1. Vue.js

* Popularity and Ease of Use: Vue.js is already very popular, especially in Asia and among developers who appreciate its simplicity and flexibility. Vue’s gentle learning curve, clear documentation, and seamless integration into existing projects make it a strong contender.
 * Ecosystem: Vue has a robust ecosystem, including Vue Router and Vuex for state management, which makes it a comprehensive solution for building SPAs (Single Page Applications).
2. Svelte

* Compiler-Based Approach: Unlike React, which is a library, Svelte is a compiler that converts your components into highly efficient imperative code that directly manipulates the DOM. This results in smaller bundles and potentially better performance.
 * Rising Popularity: Svelte’s unique approach and growing community support suggest that it could gain more traction, especially for developers focused on performance optimization.
3. Solid.js

* React-Like Syntax with Performance Boost: Solid.js offers a similar developer experience to React but is focused on fine-grained reactivity and high performance. It compiles to efficient JavaScript, leading to faster runtime performance.
 * Developer Experience: Solid.js is gaining attention for its impressive benchmarks and familiar API, which could attract developers looking for React alternatives with better performance.
4. Angular

* Enterprise-Level Features: Angular remains a strong contender, especially in enterprise environments where its comprehensive framework, including built-in features like dependency injection, form validation, and testing tools, are highly valued.
 * Community and Ecosystem: Angular’s strong backing from Google and a well-established ecosystem ensure its continued relevance, particularly in large-scale applications.
5. Next-Generation Frameworks

* Qwik: Qwik is a relatively new framework that emphasizes "instant-loading" web applications, focusing on reducing JavaScript and improving performance by delivering only the necessary code. Its potential to significantly enhance user experience could make it a future competitor.
 * Astro: Astro promotes a "zero-JS" approach, where JavaScript is only loaded when necessary. It’s gaining traction for building fast, content-focused websites and could appeal to developers looking for simpler, more performant alternatives to React.
6. Web Components

* Native Browser Support: Web Components are natively supported by modern browsers and offer a way to create reusable components without relying on a JavaScript framework. As standards evolve, Web Components could become more prevalent, reducing the need for traditional frameworks like React.
7. React’s Own Evolution

* Concurrent Features: React’s ongoing development, including features like Concurrent Mode and Server Components, shows that React is not standing still. These advancements could help React maintain its dominance by addressing some of its current limitations, particularly around performance and server-side rendering.
8. Integration with New Technologies

* Web Assembly (Wasm): As WebAssembly becomes more integrated into the web development ecosystem, frameworks that can leverage Wasm for performance-intensive tasks could emerge as strong contenders. This could lead to new front-end paradigms that challenge React's approach.
Conclusion

While React's popularity and extensive ecosystem make it a formidable tool in front-end development, the landscape is constantly evolving.

Vue.js, Svelte, Solid.js, and Angular are all strong contenders, each with unique strengths.

Additionally, the rise of next-generation frameworks like Qwik, Astro, and the growing adoption of Web Components could potentially shift the balance in the future.

The front-end development community is always on the lookout for tools that improve developer experience, performance, and scalability, so while React is likely to remain a major player, staying aware of emerging frameworks and trends is crucial for developers looking to stay ahead of the curve.