What are you struggling with? (frontend)

Hi,

I enjoy spending my time helping people with programming stuff, so I will do my best to help you with any frontend related question or problem.

The kind of questions I will be able to best help with:

• How to implement a certain feature
• Code structure / design
• JavaScript / Vue / CSS / HTML / WebGL related questions

What I will do my best with but can't make any promises on are questions related to configuration (webpack, modules, etc.) or problems with libraries I'm not familiar with.

A PM is also ok if you don't want to post a comment 👍.

Comments

[Wayne Smallman]

Hi Andi!

I've rebuilt an application in Vue, Node and so on that had been written in PHP.

One part of the application uses Cytoscape, and so far I've not been able to replicate it in JavaScript — it appears to be the asynchronous-ness of JavaScript that's the problem, when compared to PHP.

I tried the official Vue component for Cytoscape, but that appears to be riddled with bugs, and while the plain JavaScript version works with basic JSON data, it won't work with anything that's derived from the API and a database (as explained).

Thoughts welcome!

[Andi Rosca]

Hmm,
I'm not familiar with Cytoscape, but what is preventing you exactly from receiving some json from an API request and then passing it on to the library?

[Wayne Smallman]

I didn't want to go into too much detail in case you weren't interested.

First, I have to parse the data into edges and nodes. Then, I use a recursive function:

services.acyclicalBuildingOfGraph = (userID, noteID, visited = [], depth = 0, maxDepth = 5) => { ... }

... to cycle through each node, exploring each link in turn to maxDepth.

In PHP, this is simple, but in JavaScript, it's proving to be a major problem.

[Andi Rosca]

I'm still not quite sure where the problem lies. Is it the recursivity? Maybe if you can share the exact piece of code where stuff strats to break down?

[Wayne Smallman]

First, assetGraph() is called, via the API:

'use strict'

let services = {}

// Notes.

const Notes = require('../models/notes')

let graph = {
  nodes: [],
  edges: []
}

// Methods.

services.assetGraph = async (params) => {

  if (graph.nodes.length > 0)
    graph.nodes = []

  if (graph.edges.length > 0)
    graph.edges = []

  const acyclicalGraph = await services.acyclicalBuildingOfGraph(params.userID, params.noteID)

  console.log("Perspective:assetGraph()", graph)

  return acyclicalGraph

}

services.acyclicalBuildingOfGraph = (userID, noteID, visited = [], depth = 0, maxDepth = 5) => {

  console.log("Perspective:acyclicalBuildingOfGraph()", userID, noteID, visited, depth, maxDepth)

  return new Promise((resolve, reject) => {

    userID = parseInt(userID)
    noteID = parseInt(noteID)

    if ( depth > maxDepth )
      return

    if ( visited.includes(noteID) )
      return
    else
      visited.push(noteID)

    services.getAsset({
      id: noteID
    }).then(asset => {

      let assetInQuestion = asset[0].dataValues

      services.getLinksToAsset({
        user_id: userID,
        note_id: noteID
      }).then(linksTo => {

        graph.nodes.push({
          data: {
            id: parseInt(noteID),
            creation: assetInQuestion.creation,
            modification: assetInQuestion.modification,
            title: assetInQuestion.title,
            depth: depth,
            weight: (maxDepth - depth)
          }
        })

        // console.log("Perspective:acyclicalBuildingOfGraph():node", graph.nodes.length)

        if ( linksTo.length > 0 ) {

          let assetsLinkedTo = linksTo[0].dataValues.NotesLinksFrom

          let i = assetsLinkedTo.length

          assetsLinkedTo.forEach(async link => {

            // console.log("Perspective:acyclicalBuildingOfGraph():iteration", i)

            let linkedNoteId = link.to_asset

            let edgeID = `${noteID}->${linkedNoteId}`

            if ( services.findDuplicateEdgeId('id', edgeID) === false ) {

              graph.edges.push({
                data: {
                  id: edgeID,
                  weight: (maxDepth - depth),
                  source: parseInt(noteID),
                  target: parseInt(linkedNoteId)
                }
              })

            }

            await services.acyclicalBuildingOfGraph(userID, linkedNoteId, visited, depth + 1)

          })

          // console.log(`Perspective:acyclicalBuildingOfGraph():graph:${depth}:`, graph.edges)

          return resolve(graph)

        }

      })

    })

  })

}

services.getAsset = (params) => {
  return Notes.getAsset(params)
}

services.getLinksToAsset = (params) => {
  return Notes.getLinksToAsset(params)
}

services.findDuplicateEdgeId = (field, value) => {

  // console.log("Perspective:findDuplicateEdgeId()", edges)

  if ( graph.edges.length > 0 ) {
    for (const [index, edge] of Object.entries(graph.edges)) {

      // console.log("Perspective:findDuplicateEdgeId():for", index, edge)

      if (edge[field] === value) {
        return index
      }
    }
  }

  return false

}

module.exports = services

[Andi Rosca]

I think stuff starts to break down because you return inside the Promise in services.acyclicalBuildingOfGraph. If you don't call resolve or reject in a Promise it will never actually finish.

The problems I see are mostly around the confusion with async code in javascript. I'm assuming you need to use async code because Notes.getLinksToAsset(params) or similar calls are fetching stuff?

Async/await syntax is just syntactical sugar over promises, meaning that when you create an async function, it actually creates a function that returns a promise "under the hood". And when you say return inside of an async function it's like calling the resolve function of the Promise. But it doesn't automatically resolve normal promises.

I'd say you should put empty resolve() statements right before your returns, so that the Promise will actually finish. You can also just do resolve(graph) instead of return resolve(graph).
And at least your code should execute. You can take it from there and see if it actually does what it's supposed to do.

[Wayne Smallman]

I've narrowed it down to something in Vue rather than Node

Andi, thanks for the time, much appreciated.

[Brendin Venter]

Hey man, you are to kind. I’m 4-6 months into my front end dev learning journey and have just started learning Vue.

Obviously, small steps everyday as this is a long journey which I’m enjoying but what are your thoughts on starting with learning a framework early to accomplish a specific task?

I figured hey, I wanna build PWA type headless eCommerce sites using Vue.

I think some days I feel like I’m not ready to move on from Vanilla JS but I figured I can practice both everyday and learn how to implement JS into Vue.

I guess as a new dev having to know HTML, CSS, (insert CSS preprocesser, library, framework ), then know JavaScript fundamentals, then to learn ES6 and then Only realize you NEED to know a framework to then learn about API’s and databases and all that to then having to to learn when and how to use what.

Sorry long confusing comment now but trying to figure out the 3-4 things I should be really good at to start with.

I assume in the real world, UI/UX designers provide you with mockups, then can you build out the front end without any logic, then connect it to their store backend and then publish it.

Any tips would be appreciated thank you 😊

Personal website here: brendinventer.com

[Andi Rosca]

Hey,
I know it can be daunting, and what you're trying to do requires a lot of different types of knowledge that you usually pick up over time as a web dev.

I think programming is one of the things where it's helpful to have strong fundamentals, but where you only really understand what's happening when you actually roll up your sleeves and start doing stuff and getting "dirty". I think it's fine to start with a framework early on, because it'll force you to understand some things about JavaScript if you want to be able to do what you want to do.

For example, Vue and other "Reactive" frameworks will force you to understand the difference between things being passed by reference or by value in JS and how that can screw you over when your UI is not responding to some changes you're making.

You'd be surprised how stuff gets done in the "real world". Most companies don't have a full product fit yet and don't know exactly what they need to implement next. It's usually up to you to work together with a UX designer(or even alone) to figure out how a feature would look like since there's always a tradeoff between what's ideal and what's possible. So expect to always be doing this kind of problem solving, unless you land a gig at Google or Facebook, where things are probably more compartmentalized.

One concrete piece of advice that I can give is to focus on one "feature" at a time. If you're implementing something in Vue, focus on that and don't worry about architecture or other things. If you have a specific problem, don't get discouraged and think you need way more JavaScript experience and then start doing a 1 month course on JS fundamentals. Research that specific problem, and learn how JS works in that specific instance, then solve it and move on.

Anyway, if you need advice now or in the future, feel free to post more comments or PM me.

[Brendin Venter]

Hey Andi,

Really appreciate the long thoughtful reply and insight. What you said just clicked for me a lot with learning how the framework and JavaScript work together in different scenarios and you right.

Sometimes I did something in Vanilla JS to only then learn Vue handles it a different way for a reason I don’t yet understand which then allows me to research why the JS engine needs something done that way. Closures, classes and scope really clicked for me with Vue and JS together.

I appreciate the insight and love the problem solving aspect of the industry for sure.

I’m working towards and entry level junior position so thanks again for the support.

All the best,
B