I'm working in a small agency and we build multilingual websites that are complex enough to have me thinking about using a JS library, but not big enough to be considered a "Web App". We have developed our own "stack" that includes WordPress as the CMS and multiple tools (PHP module loader, JavaScript module loader, css preprocessors, build tool, etc.)
Most of our sites have various modules and forms that are used in multiple pages. For example in our current project one of this module makes several calls to an API and there are multiple event bindings to do in each pages.
I was considering using BackboneJS but feel like it's a bit overhead for this kind of project. Then I looked in React but since the modules doesn't always require to repaint the DOM, I wasn't sure it would be used properly. I care a lot about producing optimal and maintainable code (don't want to put everything in one big js file) so I'd like to find a solution. Unfortunately most documentations and examples I found for these libraries were for one-page apps or projects with only one module so it didn't help.
Anybody have suggestions as to what to use? Someone in a similar situation committed to a library and could give some feedback?
Thanks!
Related
I want a javascript framework which has features like below:
MV*
Well structured
Html file as template
Rendering fast(maybe virtual dom?)
Combine and compatible with other plugins or libraries
Edit on tablet IDE apps and view in browser immediately by refreshing page after I changed code
When I am at home, I use PC to develop my client-side(or front-end) applications.
When go out, I use my tablet(I have no note PC), so I want to develop my applications outside.
*There are some excellent IDE apps on the Android Market.
Before I know Ember, I have been using pure javascript(jquery) + css + html to develop client-side application for daily practices or work.
But recently, when I began to learn EmberJS, a Javascript MVC framwork, I am lost.
It seems that EmberJS have to get its own server up to compile something, which generate static contents for browser rendering.
I just want to get my client-side code(files) rendering in the browser, but why I have to 'run' it as if I get apache started to serve as a php back-end.
I have googled hundreds of pages to find a solution, nothing expected result discovered.
Including Angular, backbone or any other popular Javascript MV* frameworks, they all must compile there applications.
Is there anyone who has encountered this situation?
Then any advice, please?
Increasingly most Javascript frameworks are shifting to doing a "compile step" as part of using them. This allows you to do a variety of changes to your Javascript files, which in turn makes it easier for you as a developer. An example of this is that you can use ES2015 classes and then have your compile step "transpile" them to older Javascript that will work in all browsers.
The side effect of this though is that you need to have npm running on your computer to be able to do this well.
If you really don't want to have the compile step, then I would suggest looking at VueJS. It's the only recent Javascript framework that allows working with simple non-compiled JS files. But you'all be missing out on some of the best changes to Javascript as a result (ES2015 has made life much better)
Finally, I found a nice solution(framework) that is Durandal.
Really, pure HTML+Javascript without built and server up(anyhow, a web server needed if I wanted to publish it in my hosted web server).
.html extension and designer friendly.
I can upload its source files directly in to S3 and browse the html pages.
Just found some nice examples with well structured project on github is here.
And I can work smoothly with my dear designer friends.
Though its next generation Aurelia will also be built and serve it up like Ember or others, but the current generation is enough for me.
Hope those one got help from this;)
I'm currently developing several web projects in Ext JS and ASP.NET using Visual Studio 10. During that process, I have developed several javascript GUI components, some of which I use in more than one web project. Now, when I make any changes to one of these components, I would like them to automatically appear in all of the projects they are used in. I also would very much like to be able to have these components in their own respective projects / solutions.
When building my main ASP.NET web application which uses my components A and B, their javascript code would then have to be copied into the web application's output folder.
It's no problem to do such things with C# assemblies - you can just reference the needed DLLs. But it amazes me that I'm not being able to find a way to do something similar with javascript code (or, more general, with any sort of static files)!
Has anyone dealt with this problem before and found a viable solution?
I have wondered the same thing.
You can share projects across solutions (including those controlled by TFS, although I imagine there are limitations to this). I've read about this working for static files (like script) but I haven't gotten around to trying it. It doesn't seem ideal for all cases. This thread discusses how to "add as link", which might be useful.
I've recently set up a separate VS solution just for my JavaScript/CSS libraries with full source and a build/minification process. The final output is "compiled" and ready to go. I have also built out sample pages for each component and documentation. These samples serve also serve as great tests, because I can easily test for correct behavior in dozens of different scenarios.
It would be easy to write a script (or even a FileSystemMonitor, if you wanted to be fancy) to copy these final files into other project directories. Automatic copying won't always be the right answer, because you may want to have different solutions using different versions of your JS components. Manually copying isn't so bad, because you are usually only doing it when you have found and fixed a bug, or you are deploying a new version.
I would be interested in what other people are doing.
What should I use to manage growing number of JavaScript files in my application?
We are building a django application with several apps. Each app has different functionality, and has to be rendered in three different modes (pc, tablet, mobile). There is a lot of things happening in JavaScript: managing data received from the server, handling user events, injecting HTML snippets, and loading sub-components. Some of the functinality is shared between apps and view modes, but often it makes sense to write a specific functions (for example, hover and click events may have to be handled differently on a PC layout vs. a tablet layout) so we are grouping this in files based on app/layout/function.
Up to a point we were using a flat file structure with naming to differentiate types of files:
ui.common.js
ui.app1.pc.handlers.js
ui.app1.pc.domManupulators.js
ui.app1.tablet.js
ui.app2.pc.js
...
Right now, however, as the number of apps (and corner cases) grows this way is fast becoming unusuable (we're approaching 20+ files and expecting maybe 40+ by the time we're done), so we are putting everything in directories like so:
js/
common/
core1.js
ajax2.js
app1/
tablet.js
pc.js
app2/
mobile.js
...
I have been looking at JavaScriptMVC to help with this. While it does offer useful tools it doesn't seem to have anything that would specifically make managing our giant JavaScript library better. We are expanding our dev team soon and code maintainability is very important.
Is there something that may make our life easier? Are there any habits/rules of thumb you use in your work that could alleviate this?
Backbone.js is used to organize javascript heavy applications in an MVC-style pattern. It's going to take some learning, but it's definitely something you'll want to look into and learn a bit about even if you don't end up using it.
It's used on quite a few pretty impressive projects
And, here's a site to learn more with tutorials.
Typically, grouping libraries by commonality (like your second example) would be preferred. However, more importantly would be making sure you have namespaced or otherwise make them unique so that you are unlikely to get naming collisions with other potential scripts.
Do any of you know any reasonably good resources containing methods and tutorials to help build a Dojo driven entirely AJAX application. I have been searching Google and the Dojo Toolkit web page however not many resources seem to tie everything together..
Thanks in advance,
If you are familiar with Dojo principles the best way would be studying working source code. There is nicely commented github project dojo-boilerplate to start with. It provides, well, boilerplate code to start building a single page javascript application including preconfigured build system. Unfortunately - afaik - build scripts based on Java neither node.js does not work under Windows as of now (not even under MinGW or Cygwin due path resolving issues).
Aforementioned branch uses AMD modules new to Dojo 1.7+, for previous Dojo version employing synchronous loader use this branch.
Also have a look at build.dojotoolkit.org and check out its source code.
Last but not least, don't forget books. You can find those I prefer in my Career 2.0 Profile.
Disclaimer & Long Winding Question Approaching
I know topics like this have been beaten to death here so suffice to say I'm not asking about which framework is better, I don't really care about opinions on the better framework. They all do pretty amazing things.
The Question
Given that I have an existing web application, made of mostly regular HTML+CSS (jQuery where needed), which is the optimal framework to integrate a few "rich" pages into typically a regular stream of HTML.
Reason
I am trying to bring our proven application into the realm of awesome desktop like UI but I want to do it one small piece, one screen at time. But for our users, support personel and especially me taking it slow is the only option.
Also, with our branding requirements having a framework that just takes over the viewport isn't an option, it has to play nice with other HTML on the screen.
Imagine the example being a rich user manager in an otherwise plain HTML+CSS environment.
Experience Thus Far
Dojo + Dijit
Pros: The new 1.5 widgets plus the claro theme is the cure for what ails us. Dojo seems to be able to use markup to create the UI which is very appealing and has a fair amount of widgets.
Cons: Holy bloated lib Batman! Dojo seems to be enormous and I have to learn a custom build system to get it to stop requesting 4,800 javascript files. This complex empire of Javascript makes me believe I won't be able to create much that isn't already there.
ExtJS
Pros: Amazing set of widgets, does everything we could possibly want. Seems quick, every version brings new improvements.
Cons: I'm not sure how to use this without the entire display being EXT. I'm still building a web site, so I would prefer something that could integrate into what we already have. Some pointers here would be great.
YUI
Pros: Well, it's Yahoo isn't it? AWS console is downright wicked. Plenty of support and a giant community.
Cons: Well, it's Yahoo isn't it? AWS console is the only wicked thing. Complex for someone who's used to jQuery.
Help Me
I am willing to accept experience, links to ways to solve problems I've outlined, new toolkits (even though I'm pretty sure I've seen most by now) or even just advice.
Regarding ExtJS, it's pretty easy to start it in an existing div with something like this:
Ext.onReady(function() {
App = new Ext.Panel({...})
App.render('div-id')
});
The App panel can then have it's own layout manager.
This might be useful if you're familiar with jQuery, but not yet familiar with YUI 3 syntax: http://www.jsrosettastone.com/
Each of the libs you listed is excellent. When embarking on a larger scale project, the quality of a lib's documentation, community, and commitment to support become more relevant.
With Dojo, keep in mind that outside of dojo base, it only ever loads what you tell it to. But yes, without a built layer, that means it could easily end up requesting 50 JS files at startup for a large application using a bunch of widgets.
There are several pages in the reference guide documenting the build script: http://www.dojotoolkit.org/reference-guide/build/index.html
Rebecca Murphey wrote a nice blog post outlining an example app and build profile that you might find illuminative: http://blog.rebeccamurphey.com/scaffolding-a-buildable-dojo-application
If you get stuck, there's likely to be people in the Dojo IRC channel that can help.
RE ExtJS: I'm not sure what your exact situation is, but keep in mind that if you're intending to use it in commercial non-open-source software, you need to pay for licenses: http://www.sencha.com/store/js/
I'm a little curious as to why you think the size / number of requests is specifically an issue with Dojo though. I haven't used the others, but I'd expect it to be somewhat of a potential concern with any of them.