I'm brand new to web development with no experience with javascript but experience with HTML/CSS so bear with me here. I'm attempting to create a static website without the use of a website builder by using some sort of front-end framework (leaning towards bootstrap but open to just about anything). One part of this website is going to require a data structure to hold information about multiple objects. For a very close analogy, let's say that I want to store all fruits and vegetables in my data structure. Each fruit/vegetable is going to have multiple attributes associated with it such as color, size, etc. I don't know what the recommended way to store this information would be. Would this require a database created with something like SQL? Should I use a different back-end framework like Django? Any help would be appreciated.
Related
TL;DR: Need to create UI pages dynamically from user provided custom templates. These templates should contain enough information so that front-end as well as back-end can be created dynamically, for all user cases.
Keeping the TLDR on top. Also, I am not sure if this has been asked here before, so sorry if this is a duplicate question.
A little background, I am trying to create a Angular 7 based web application that will serve as a single interface for users to configure network devices (routers, switches, etc.). To cover as many different devices and vendors as possible, I cannot make my UI pages static. They should have the capability to change based on user requirements and specifications.
To achieve something like this, common logic states that we should let users create custom templates for their data and data attributes, and then let them upload it to the portal, so that the UI can be rendered dynamically from there.
For example, user A might need a form with 2 input parameters(device name and IP address), while user B in the same organization might need a form with N input parameters, M dropdowns, etc., for some complex configurations.
So coming to the question finally, What is the best way to generate UI pages in case your pages cannot be static and have to change based on user's requirements? In case we go with user uploaded templates, what information should these templates contain?
I am right now using Angular 7 to build my app but I am flexible in this regard. Here for ideas and brainstorming.
The answer is to implement a Data Driven UI. For beginners such as myself, NPM - Data Driven UI is a good starting point.
To satisfy my use case, I implemented a Java platform to generate my UI metadata based on user-input, which is then fed to UI to generate web-pages revolving around a central schema/theme.
I am currently thinking about coding my first webapp.
I would say i have beginner to intermediate coding skills in html,css,js,jquery node,sql and monogodb.
The problem is that i do not really know how to achieve my goal.
My goal is to built a responsive single page website, which gets the stock price from an api and display it on one card. Furthermore the user should be able to click on the plus button and add another card with an stock index he chose from a choosing form option.
Now what want to know is:
Is this an example for choosing a js framework like react, vue etc. and how can I accomplish my goal ?
I coded the api get request etc. in node and was able to print everything I want into the console log. How do I do the same thing but displaying it on my html page ?
How can I create these cards which are automatically getting added to the homepage ?
How can I save the data for each individual card? (especially without a login procedure...)?
I know these are quite easy questions but I really want to learn how to do it.
Please check the images below.
(check:
I would say try to use your existing skills to achieve your goals. When you run into problems you cannot solve or problems that could be solved by a specific framework such as react, try using them. It's better to understand what these frameworks are doing before you rely on them for every development.
You need to use an http framework like express to return your api values from node js to a web client.
Needs more info but as you're already talking about component based libraries, a good approach would be to keep the cards in a json array and render your page from that. If you are persisting the card data in a database you will also may want to render them server side as the page is loaded using a server side technology like node.
To keep things simple, you can store the info client side using something like localStorage or indexeddb. If you want to store something on the server side, you will need to introduce a way of identifying the user.
I'm assigned to work on a Javascript solution that seems fairly easy to implement in platforms like ASP.net, WPF, or Flash Builder (because I can create separate components and controls).
The project requires many types of file selection-like mechanisms for each unique type of related data, many of each require auto-completion-like capabilities, navigating a file hierarchy-like system, and pagination. There are also multiple tabs for managing the different related pieces of data of the complex object.
Also, the user must be able to save and retrieve work all on the same page.
Such a requirement requires tons of markup and event-handling code in one page, which easily results in over 1000+ lines of code, even with jQuery and knockout.js. (It becomes very tedious to wade through and maintain.) Is there a way to create separate "pages" with both HTML and JavaScript, and then embed/reference them on the main HTML page?
Is such a project with such complex requirements better suited for Flash Builder or Silverlight, or should we stick to Javascript & HTML?
It looks like you're building a Single Page Application.
I'd recommend looking into AngularJS. It allows you to include HTML templates and bind controllers to them.
I strongly recommend YUI3
YUI3 contains many features and widgets like calendar,auto-complete,many types of data-table(grid),template rendering, Ajax call(sync & Async), event handlers, Panel , accordation , TabView, Router and etc...
have a look at below url.
YUI3
My question doesn't pertain to any specific piece of code that I'm working on, but is more generally related to best practices for structuring a web application, or, to be more specific, suggestions for structuring a specific kind of web application that I am working on. In this case, the application currently is not built according to any paradigm (like mvc) and I don't know if that's a good thing or a bad thing, given the specifics of what it does.
The application allows users to fill out web forms which are dynamically generated. In constructing these forms (using jQuery/AJAX predominantly) I have to pull admin-generated information from the database which dictates how the form is structured while also pulling user-generated information from the database which populates the form's inputs with content. I have tried to keep the two (structure and content) conceptually separate (or at least distinct from one another) throughout the code, but I'm realizing that for the form to be generated as I want it, they kind of have to be mixed together.
For example, the forms themselves are relatively complex, giving administrators the ability to create different sections in the form which allow users to fill out multiple entries for each section (so, an administrator might create a section called "past employment" allowing a user to add multiple entries using that same collection of inputs). And so, to create the form, I start at the top and work down the hierarchy:
create the form using the admin-generated structure;
create the sections using the admin-generated structure;
(in the case of multiple-entry sections) create entries using user-generated content;
create inputs using admin-generated structure;
populate inputs using user-generated content.
It's the switch back and forth between looping through structure and looping through content which I think is a bit sloppy, if not conceptually, than at least in the way that I have been implementing it. It seems to me like the switch is a necessary one to make, but I'm stumped when it comes to a way of doing it elegantly. This where I think that learning a thing or two about how programmer's generally structure these types of things would help (I'm not professionally trained...) Is there some existing paradigm or some generally accepted methodology which would help me keep all of the components of the form's structure separate from the user-generate content which populates them while also facilitating the hierarchical construction of the form?
Thanks.
There are a bunch of javascript frameworks designed to solve your problem. Checkout backbone.js or knockout.js. Both are excellent.
Preamble
So, this question has already been answered, but as it was my first question for this project, I'm going to continue to reference it in other questions I ask for this project.
For anyone who came from another question, here is the basic idea: Create a web app that can make it much easier to create other web applications or websites. To do this, you would basically create a modular site with "widgets" and then combine them into the final display pages. Each widget would likely have its own set of functions combined in a Class if you use Prototype or .prototype.fn otherwise.
Currently
I am working on getting the basics down: editing CSS, creating user JavaScript functions and dynamically finding their names/inputs, and other critical technical aspects of the project. Soon I will create a rough timeline of the features I wish to create. Soon after I do this, I intent to create a Blog of sorts to keep everyone informed of the project's status.
Original Question
Hello all, I am currently trying to formalize an idea I have for a personal project (which may turn into a professional one later on). The concept is a reflective web application. In other words, a web application that can build other web applications and is actively used to build and improve itself. Think of it as sort of a webapp IDE for creating webapps.
So before I start explaining it further, my question to all of you is this: What do you think would be some of the hardest challenges along the way and where would be the best place to start?
Now let me try to explain some of the aspects of this concept briefly here. I want this application to be as close to a WYSIWYG as possible, in that you have a display area which shows all or part of the website as it would appear. You should be free to browse it to get to the areas you want to work on and use a JavaScript debugger/console to ask "what would happen if...?" questions.
I intend for the webapps to be built up via components. In other words, the result would be a very modular webapp so that you can tweak things on a small or large scale with a fair amount of ease (generally it should be better than hand coding everything in <insert editor of choice>).
Once the website/webapp is done, this webapp should be able to produce all the code necessary to install and run the created website/webapp (so CSS, JavaScript, PHP, and PHP installer for the database).
Here are the few major challenges I've come up with so far:
Changing CSS on the fly
Implementing reflection in JavaScript
Accurate and brief DOM tree viewer
Allowing users to choose JavaScript libraries (i.e. Prototype, jQuery, Dojo, extJS, etc.)
Any other comments and suggestions are also welcome.
Edit 1: I really like the idea of AppJet and I will check it out in detail when I get the time this weekend. However, my only concern is that this is supposed to create code that can go onto others webservers, so while AppJet might be a great way for me to develop this app more rapidly, I still think I will have to generate PHP code for my users to put on their servers.
Also, when I feel this is ready for beta testers, I will certainly release it for free for everyone on this site. But I was thinking that out of beta I should follow a scheme similar to that of git: Free for open source apps, costs money for private/proprietary apps.
Conceptually, you would be building widgets, a widget factory, and a factory making factory.
So, you would have to find all the different types of interactions that could be possible in making a widget, between widgets, within a factory, and between multiple widget making factories to get an idea.
Something to keep on top of how far would be too far to abstract?
**I think you would need to be able to abstract a few layers completely for the application space itself. Then you'd have to build some management tool for it all. **
- Presentation, Workflow and the Data tier.
Presentation: You are either receiving feedback, or putting in input. Usually as a result of clicking, or entering something. A simple example is making dynamic web forms in a database. What would you have to store in a database about where it comes/goes from? This would probably make up the presentation layer. This would probably be the best exercise to start with to get a feel for what you may need to go with.
Workflow: it would be wise to build a simple workflow engine. I built one modeled on Windows Workflow that I had up and running in 2 days. It could set the initial event that should be run, etc. From a designer perspective, I would imagine a visio type program to link these events. The events in the workflow would then drive the presentation tier.
Data: You would have to store the data about the application as much as the data in the application. So, form, event, data structures could possibly be done by storing xml docs depending on whether you need to work with any of the data in the forms or not. The data of the application could also be stored in empty xml templates that you fill in, or in actual tables. At that point you'd have to create a table creation routine that would maintain a table for an app to the spec. Google has something like this with their google DB online.
Hope that helps. Share what you end up coming up with.
Why use PHP?
Appjet does something really similar using 100% Javascript on the client and server side with rhino.
This makes it easier for programmers to use your service, and easier for you to deploy. In fact even their data storage technique uses Javascript (simple native objects), which is a really powerful idea.