We are getting ready to move our app over from Silverlight to HTML5/Javascript. In Silverlight we were using Devforce and Cocktail.
We also relied heavily on Silverlight's dataform for editing records. We had created a generic screen that could take just about any of our entities and make its fields editable.
Breeze has handled the Devforce aspect of our code but we are struggling to find an answer for the dataform. We dont want to create a bunch of different screens just to edit records. We are looking for a way to generate most of the view based off of the entities we receive from Breeze.
Anybody doing this? Anybody have an idea?
For inspiration, you might spelunk the as-yet-undocumented-unreleased Breeze Inspector in the Breeze Samples on GitHub. This app creates HTML "forms" dynamically, choosing controls for each property and laying them out based on its own metadata. It uses some "advanced" techniques involving RequireJs. It's offered "as is"; please don't expect support for it. I think it is simple and clever (in a good sense) and hope to shape it into something publishable.
Related
My background is from mobile development and I'm quite new to Javascript so I'm quite confused about the following.
I'm trying to build a JS module that handles a list of data and displays them, so I'm looking for something like JS ListView with the following features:
it accepts an array of objects
it accepts an HTML template (in any format) to render items
it renders only visible views so it can handle large datasets (virtual list)
it can handle item click to return index/underlying object
it supports data modification (item add/remove)
it's free
not under GPL (as long as I understand it correctly) so it can be used in a project without the obligation to submit the code to open source
it supports filtering/sorting (this one is optional)
As a mobile developer those requirements seem to be pretty default to me, but I'm not able to find any suitable solution for several days already.
The options I've checked are:
dhtmlxList - the closest solution I've found so far, but it's under GPL v2 that requires posting the code to opensource.
vue: lacks virtualization/filtering
lists.js - great one, but I can't get how to handle item click to get the underlying object/item index
vlist - a good one, but doesn't handle data modifications though
webix - looks great, but seems to be too "paid"
bunch of libraries that I even can't already find links to
I believe I'm just looking in the wrong direction or using the wrong search terms as it all seems to be pretty standard and any input is much appreciated.
And sorry for stupid question, but in general, how do you handle common UI elements in JS world?
Is there any comprehensive libraries of UI elements for JS which is free and not under the GPL license?
Just went across this Vue component:
https://github.com/Akryum/vue-virtual-scroller
It seems to be what I was looking for - data driven efficient list for javascript (though it's based on a Vue framework which might be not that straightforward to integrate if you don't know it)
Still solves my problem and maybe it would be useful for someone else.
Trying to wire in different components from different libraries / frameworks can be daunting,if you this you would have need for other components for example slider, spinner etc you could pick a framework like ionic that provides to components out of box.
I am creating a HTML5 website and I need to create a site search box that
displays results in a results page with description and photo.
How would I go about this.
I have looked alot and only see google search and thats not what im after.
Can this be done without PHP or RAILS?
Looking for purely JS and html5 and css and jquery.
Thanks and a point i the correct direction would be great.
Example is this Wordpress sites search http://agroamerica.com/
I dont want to use WP but hand code it.
Any help is great.
Your best bet, given that you don't want to implement a third party indexing service, would be to set an indexing function on your server's back end to handle search requests. You mentioned Rails, and there are some pretty great gems for this.
One point of trouble you will have with this question is that, in my experience, full site search functionality without a back end / database to query is not a very useful solution for any applications I've seen.
However, given that you want to keep it JS, you might look into the MEAN stack (MongoDB, Express.js, Angular.js, Node.js) which does some pretty sweet things like two-way data binding. It's a pure Javascript solution (albeit not a purely-front end solution).
Honestly, it sounds like you might be taking too big of bites to start off with. Try working through a scripting language on a site like Code Academy and learning about basic web application setups like MVC (a common way to handle different parts of a web application (used by the aforementioned Rails)). Stack Overflow users can be pretty brutal when you ask questions about advanced functionality without some understanding of the functionality's underlying elements or functional requirements, and search engines from the ground up have historically been the thing of doctoral dissertations.
Good luck!
The JavaScript codebase we are using on our website is pretty well structured (outlined here if anyone's interested).
I have been looking at integrating backbone.js (or knockout.js, for some of the features) into our code -- but after closer considerations I don't think I care that much about data binding (my appliation does not do intensive client<->server data exchange, its more biased towards server->client->js data pipe), so I don't really care if I don't have dynamic data binding and syncing.
As I am not closely familiar with those libraries, I am afraid that by opting-out of using those libraries, I am missing some other vitally helpful features. Am I?
Personally I'd use backbone if I was building a full blown single-page web-app. If your website is primarily HTML, but uses JS for some minor added functionality I'd not worry about it. Backbone is good at handling client-side data models and tying changes to those to view updates.
Personally, I've used knockout and found it's reliance on data-binding in the HTML confusing. It wasn't something that worked well for me. It might be a little bit more friendly to building websites that are partially dynamic, because a lot of the logic goes right into the html view layer. You may want to listen to this recent podcast interview the creator of knockout as it may shed some light on things. http://javascriptjabber.com/
In my case, when building a big website with some dynamic elements I've stuck with the pattern of some global jQuery plugins and page specific JS. It works well enough for simple additions to specific pages.
I don't know if this question is super specific, so here's a generic answer :)
I'd first like to point out that while declarative databinding is the key feature for KnockoutJS, it is not a part of the core-backbone framework. There do exist multiple plugins like (Rivets.js and Orchestrator) which provide such functionality in Backbone JS.
Now coming to the primary aspect of your question - In terms of advantages other than Data-binding KnockoutJS does not have much to offer. However even if interactive data binding is not a primary concern you should definitely consider using BackboneJS. The reason for that is Backbone comes bundled with a client side routing system and a succinct but minimal approach towards managing Data obtained from the server in javascript.
As you have mentioned that your application is data-driven, probably the data that you have fetched in the client is not fetched all at once but is incrementally updated. In that scenario, having observable Models and collections might help you to manage your in-app data-dependencies well (as well as keep any widges for visualizing the data in sync.)
I am building a completely ajax web app (this is the first web app I have ever created). I am not exactly sure if I am going about it the right way. Any suggestions or places where I can go to find suggestions?
Update:
I currently am using jQuery. I am working on fully learning that. I have designed a UI almost completely. I am struggling in some parts trying to balance a good UX, good design and fitting all the options I want to fit in it.
I have started with the design. I am currently struggling with whether to use absolute positioning or not and if not how do I use float etc. to do the same type of thing. I am trying to make it have a liquid layout (I hate fixed-layout pages) and am trying to figure out what I should use to make it look the same in most screen sizes.
Understand JavaScript. Know what a closure is, how JavaScript's event handling works, how JavaScript interacts with the DOM (beyond simply using jQuery), prototypal inheritance, and other things. It will help you when your code doesn't work and you need to fix it.
Maintain usability. All the AJAX magic you add is useless if users cannot figure out how to use it. Keep things simple, don't overload the user by giving him information he doesn't need to know (hide less important information, allowing the user to click a link to show it), and if possible, test your app with actual users to make sure that the interface is intuitive to them.
Code securely. Do not allow your server to get hacked. There are many different types of security flaws in web apps, including cross-site scripting (XSS), cross-site request forgery (CSRF), and SQL injection. You need to be well aware of these and other pitfalls and how to avoid them.
One starting point is to look at the Javascript Libraries and decide which one to use:
http://code.google.com/apis/libraries/
http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
You probably don't want to do raw Javascript code without any library. Once you decide on a library to use, then you can look at its documentations online or the books about using them. jQuery does have pretty good documentation.
Define "right way."
There are many "right ways" to code an app.
Things to keep in mind are trying to design a nice interface. The interface can make or break an application and studies show that it can even make it seem faster if you do it right. jQuery is good for this.
Another thing to consider going in is what browsers do you want to support? Firefox is really doing well and Google Chrome's market share is growing so you will want so support those for sure. IE is a tough one as it doesn't have the best support for standards, but if you are selling a product you will really want this.
One of the best articles that I've ever come across about the structure of an ajax web application is this one. A little outdated because it refers to XML as the primary data-interchange format, now JSON. jQuery, a javascript framework, contains excellent functionality for both DOM manipulation and AJAX calls. Both are a must in any AJAX-driven web app.
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.