I have a fairly large web app and am using JQuery with JQuery UI, a couple JQuery plugins, a couple other javascript widgets. And DataTables. These pieces have been piling on throughout development and what I now have is a substantial mess of files and folders. Some are duped, some I cannot tell if they belong at at all, but the biggest problem seems that some of these pieces rely of certain assets and folders having specific relative paths to one another.
So my question: What is a folder/file structure that will work. DataTables in particular seems most picky and easily breaks when I move stuff around. I expected to be able to find this in the JQuery docs, and if not that then via some googling, but neither have panned out.
Thanks in advance.
With big JS applications, I would recommend using JS MVC framework like backbone: http://documentcloud.github.com/backbone/
Related
I have an old project built years ago with spaghetti jQuery code, which I'd like to update to use a JS framework (mostly for the usual reasons: better scaleability, better state management, cleaner/more maintainable code, etc.). I find Vue.js especially intriguing.
The project allows the user to load any of a large selection of .svg files from a directory on the server into the DOM dynamically, then interact with them (mostly clicking to change fill/line colors of individual path elements, handled by jQuery plus a plugin).
After some research and experimentation, I haven't found a simple way to do this with Vue--as best I can tell, I would need to manually edit each .svg file to put the (many) bindings in place to allow for discrete parts of the .svg to have interactivity. This is a dealbreaker due to the large number of files and the need to quickly add new ones.
My vague question (sorry) is: can anyone point me toward a better solution? (A framework better suited to this? A way in Vue to replicate this kind of interactivity with a plain .svg? A way to automate modifying the .svg files to have Vue bindings on their arbitrary numbers/types of svg elements?)
Thanks--
The easiest way in Vue to add interactivity is to convert them to components
but this won't work in your situation because the svg's are uploaded by users.
So you'll need to find or write a component that adds this feature to your app.
Take a look at https://github.com/seiyable/vue-simple-svg for inspiration.
I currently have an application that loads the html header, navigation, and footer information into an html page using separate php includes.
I am trying to re-design the application so that it no longer is dependent upon php includes (so that I can port it to PhoneGap). I have been scouring for a solution that would allow me to get the same templating functionality, while shifting the php scripts solely to the server.
I have looked at a number of the Javascript Template Frameworks - ractive, moustache, handlebars, etc. But most of those seem only data focused - which is great for that purpose, and I may use one for later. But I am looking for something to provide the bones, not the attributes. Also, each of those seems to have routing/url/seo limitations.
I have also tried some of the frameworks like Meteor, Ember, Express, and Sails but they will require a lot of additional coding to get to the same functionality I currently have - but they have the ability to define application level templating/includes. Slim Framework seems to be closest (and maybe coupling it with Twig ), but before I commit I wanted to get some feedback/option.
Is there a better way to do this?? And if so with what? And maybe even how?? Thanks all in advance for your feedback!
After looking through a number of the solutions, I feel that using jquery with handlebars. will actually be the best solution. It does not allow me to do exactly what I'd like to do, but it is close.
I will keep the module pages as separate html files in a templates folder and then inject the moustache modules into the container page using jquery ajax and/or .load.
This may not be a plausible and I will except that as an answer if someone can tell me why with reasonable detail but I am looking to create a simple Angularjs app that I can include in any html page (whether on a tomcat server, MAMP or in wordpress) and it not be affected by any js/css libraries used on the same page except by my app's own Dependencies.
For example, if I built a simple Calculator that uses a specific version of Bootstrap, Jquery and Angularjs, I would like to be able to give someone the project folder and a simple snippet or 2 like the following and it would work on their site without clashing with anything else already existing on their site.
<div data-my-ng-calculator></div>
I realise that it if this is plausible may require some complex angular application bootstrapping or even an external library to some how load my JS and CSS in some sort of self contained container. Or maybe inside my app I need to find some way to reference my libraries and Css class with a custom selector of some sort????
Any advice or links to articles/tutorial/frameworks or books on the matter would be welcomed. Obviously this is currently hypothetical ( or maybe it's not and someone has seen similar already) and I am just looking to explore the possibility
I have tried Googling this but so far i haven't been able to find anything but this is probably down to bad search terms.
It appears that this is an emerging standard called Web Components (Thanks #steveax for pointing me to this). From here I was able to then find this excellent tutorial on css-tricks , in particular the section on the Shadow Dom was very relevant. unfortunately according to canIUse.com it is only supported in Chrome and and Opera at the moment.
I am creating a site that uses Java Script and CSS from jQuery and jQuery Mobile. Right now I am not hosting any of the files but rather referencing URLs on the jQuery site. This has the disadvantage that I have to load resources from jQuery every time the page loads and I cannot alter the files myself. I want to switch to hosting this stuff locally and would like to go about it in an organized and scalalable fashion. Is there any better way to do this than just copying the code from the links and pasting it into my own local .css and .js files?
Modifying the jQuery source is not ideal as you would be required to maintain it with every new release. If there is additional functionality you would like to add, it is better to create jQuery plugins. As for managing your project with respect to CSS and JavaScript files, most IDEs will generate a series of folders following the convention of JavaScript and CSS files being placed in a scripts and styles directory, respectively, under your project root. On top of this, it is wise to catalog your changes with some form of source control, such as git. There is plenty of documentation on the web on how to use this tool, and explaining how to use any form of source control is far too broad for an answer on StackOverflow. There is a certain level of mental discipline you must maintain, however, especially if you are manually managing the structure of your web project. This will come with time and experience as to what works best for you.
We have a number of asp and asp mvc web apps that need to share static resources. I'd like to be able to put these in a common project that can be shared across sites but I'm unsure how to do this? I understand we could use a CDN, but would prefer a common project approach. Any examples would be greatly appreciated!
There are really two (or three) issues here, and resolving the problem is not as simple as it should be.
The first issue is having the shared resources available at runtime - for that, putting the resources on a CDN may work, but you're probably going to need to reference these during design, as well as include them in your version control system.
The second is sharing common resources across ASP.Net Projects & Solutions, and sadly the ability to do this will depend on the third item, your source control system.
If you're using VSS, well, you have my sympathies, and you're stuck for now. It's time to upgrade anyways.
Other version control systems (including TFS) don't have quite the same inflexible link between projects & solutions and the repository. You should be able to have multiple solutions & projects overlapping, something along the lines of:
Root
Web\
App1\
App2\
SharedResources\
Class1\
Class2\
etc
You can have multiple Web app projects - one can reference Web\App1 and resources in Web\SharedResources, another Web\App2 and overlapping resources in Web\SharedResources, and then have multiple solutions tied to a single source control repository. Unfortunately, I haven't found a way to do this and have the resources and apps in separate structures.
Depending on where you want to keep your .sln and .proj files, you may have to manually edit them to update the paths - Visual Studio won't really like creating this type of overlapping structure.
You could create your own CDN by hosting those static files in a separate web server.