Have you used Data Structures in your front end job? If yes how?

Have you used Data Structures in your front end job? If yes how?
0

#1

Hi Friends. I am curious to know how Data Structures could be used in front end development. Has anyone used them in their work? I certainly know the DS could be used in building the logic in backend which could be consumed through API in frontend. But I am curious how it could be used in Front end?


#2

For example the html file representing a page’s content is a data structure. Your question is very broad.


#3

Logic is written in backend. It might be for extracting data from database or could be creating of any application. This could be used in front end using API. So how important is using DS in front end as much as they are in backend. Any examples ? Displaying HTML you don’t use DS like linked lists or Hash tables or Trees.


#4

DOM is represented by nodes with child nodes - child node are arrays (or possibly doubly linked lists?). Hash tables for class and ID names for lookup. Tree of some kind for the HTML structure itself (b-tree?). Normal use of objects is to represent hash maps. Arrays to represent lists or arrays or queues or stacks. Maps for maps. Sets for sets. Etc etc. If needed, can write more complex data structures, just extra complexity not needed that often (tbh same back end, but more likely to have access to them straightaway via larger stdlibs)

I use Immutable.js quite a bit, just automatic go-to whenever I use Redux, is immutable data structures, built on hash map and vector tries under the hood


#5

Wow that was great. Thank you. I was trying to understand the importance of DS in back end and front end development phase. Because what I have seen is using DS is common/prevalent/required in backend but in front end it may not be necessary. of course if you ignore the in built structure like DOM or others as you suggested. I am talking about the live project. Nevertheless,
Thank you


#6

A data structure is more or less a bunch of data that is organized based on a bunch of rules (format if you will). From wikipedia:

In computer science, a data structure is a particular way of organizing data in a computer so that it can be used efficiently.

So since an html file contains the content of a page (the data) and it is organized in a specific format it is a data structure. For example a javascript object or a CSS file is also structured data. So there are a lot of different places where there are data structures in front-end development. It would practically be impossible to do front-end without data structures.

If you consider the topic just in terms of javascript, again its pretty much impossible to ignore data structures. The most trivial once are objects and arrays and they are everywhere.


#7

Hey thanks for the answer. Yes you’re right it is impossible to do front end without DS. HTML file or other examples what you gave is perfectly correct. Everything is an in-built DS like DOM tree. But what about DS exclusively in your project other than these in built ones. Like you develop an hash tables/Linked lists by yourself to present it on UI. Like back-end DS is used pretty heavily. On similar lines I am trying to understand if DS has been used to develop front end,not just the in built ones.


#8

Well for example if you make calls to an api and the data you get isn’t in the format that you need it to be, it can be an advantage to use a specific data structure to convert the data. So yeah they are pretty handy to know. However I doubt that you would need to write the implement the logic behind a hash table or a linked list most of the time. There are libraries (lodash fx.) that provide it out of the box.


#9

For me, the DS I use the most on frontend are just lists and arrays.

Personally, I tend to do most/majority of my data processing on the backend and just send to the client/browser a mostly finished page for display. Only when it’s unavoidable (ex: displaying POI on Google maps, or using datatables that paginate without reloading) do I use DS on the front end.

And even on the backend side, I tend to use SQL queries to build my dataset, or massage my data (inner joins, sort, random, filtering, etc)

If the data is just for display, I’ll even build the whole html view on the backend, call it by ajax or fetch from the frontend, and just display the whole snippet as is. I’ll just have a blank div section that will be filled-in later during runtime with the ajax-fetched formatted view.

This way, I know the page will look and work exactly as I want even if the browser client is old, or their phone is slow in running JS.

But that’s just me, I tend to be more old-school.


#10

I just finished a portfolio page for myself (a real one, not the FCC challenge). I used a lot of arrays, and arrays of objects, and arrays of objects that had arrays and objects inside them.

I think it’s inaccurate to say, “Logic is written in backend”. First of all, not all apps have a real backend, in the sense that some are just static file servers. There is a lot of logic on the front end.

As to linked lists, etc. I did use a queue on a project. But of course you can just use a JS array for that. Many of these data structures have out of the box solutions in JS. It’s not like in the old days where you had to build them yourself. But I still think I learned a lot by learning how to build them, even if it was decades ago.


#11

Yes you’re right. I never meant that logic can’t be written in front-end but I just wanted to know about how much DS are being used in real live projects. Obviously, in order to access data from backend or API we will do that using objects and store it or do whatever we want to do with it. And for that logic is required. But using DS in front end may not be so prevalent as much as it is in back end.


#12

Good to know that you use Lists. May be old school but still it works for you great.


#13

I don’t mean linked lists… just an array of JSON objects, which may contain more JSON elements inside.

Here’s some of my code from a real live project. As you can see, I get data via ajax (or axios) and my frontend page just consumes it for display.


            // NOTE:  drop multiple map markers, use an array of marker objects
            axios.get('/api-jobs/LatestJobsMapMarkers.cshtml')
                .then(function (response) {
                    var mapMarkers = JSON.parse(response.data);
                    map.addMarkers(mapMarkers);
                })
                .catch(function (error) {
                    console.log(error);
                });


            $.ajax("/api-jobs/LatestJobs.cshtml")   // this is the datasource, in html format. We'll  load this html page via ajax'
                .done(function (data) {
                    $("#jobdata").html(data); // get <table> formatted data from server
                    $('#jobstable').DataTable(  // then apply datatable formatting to <table>
                        {
                            "paging": true,
                            "ordering": true,
                            ..... // and so on and on 


#14

Hey thank you for the response and code.


#15

Data structures in the sense I think you’re referring to aren’t necessarily explicitly used on the backend either, particularly web development. Component parts will use implementations of data structures, either from stdlib or using libraries or hand written, but that fact is normally hidden from the developer - what data structure is used is an implementation detail and often has little bearing on the API.

And lists or arrays or hash tables/maps/dicts/whatever will cover most cases; they’re data structures and they’re used constantly. Actually writing implementations of more complex data structures isn’t that common for the vast bulk of day to day work - I can’t overstate that enough. Knowledge of various structures is important but actually producing implementations of non-basic structures isn’t very common at all (relative to just producing stuff).

So if you write a [complex] library or framework, then you’d possibly look at the best data structure. An example is React. It’s functionality based on a virtual DOM that sits in-between the app code and the real DOM: the app updates the vdom, which decides what should be updated in the real DOM. The vdom is a tree, and diffing has to be extremely efficient. React uses a process called reconciliation to do that https://reactjs.org/docs/reconciliation.html

But though it is useful to know how it works, it’s just an implementation detail for the person consuming the library, which is the vast % of developers. That’s a front end lib, but same applies to backend.

EDIT: this is a solution I wrote (bit messy) for a challenge on http://exercism.io. Given two buckets of different sizes and a target amount of liquid, how can you measure out that target amount (see Die Hard 2 - https://youtu.be/BVtQNK_ZUJg). This is really easy if you have a pen and paper, using a parallelogram. In code, it’s a bit more complex, so I built then solved a directed graph (uses a queue and a set to construct it).


#16

Thank you. Sounds great!

Yes, that is what I am trying to understand. In front end it is not so common but perhaps in backend.
But thank you for the React example. Actually makes sense.


#17

It’s a bit of a wierd one: you get that much out-of-the-box with the majority of (backend) languages that writing data structures in the way I think you mean - like implementing trees of various kinds for example, or say DACGs - isn’t too common. But because those structures generally have implementations built into the stdlibs, or in very commonly used libs, then possibly they’re used more explicitly than with JS. Typed stuff helps as well maybe, if I need to explicitly type things I find I’m thinking a lot more about structures - but then I’m doing this more for frontend atm, where I mainly used typed (JS with Flow or BuckleScript), rather than backend, where I mainly use dynamic (Elixir)