Develop Reference

Prototyping for UX: dev plan + jQuery / Framework?

I started to work as a UX designer and until recently have been prototyping using visual tools like Axure or Balsamiq mockups.I've always been drawn to coding though and want to become more code-oriented in my prototyping skills.
I'd like to know your opinion on choosing the right development path in my particular situation. Briefly:
What I know:
HTML + CSS, Bootstrap 4 basics, basic coding concepts (like variables, functions, classes etc.) I recently started to learn vanilla JS basic concepts.
What I want to be able to do
rapidly prototype (in order of importance!) 1. apps(!), 2. dashboards(!), 3. mobile apps, 4. web sites
have intermediate understanding of code and ability to modify it
create dynamic, animated graphs (d3.js?)
(important) dynamic animations of UI elements
Goals:
First of all I want to plan my coding schedule for next 4-5 years in advance. I understand there is no best tool and perfect path, that's why I want to follow "good enough" path.
I don't necessarily look for the newest and shiniest technology. For my purposes it needs to be efficient today and shouldn't die in a few years.
Questions:
I think it's a good idea to keep learning JS to say intermediate point,until I'll get into frameworks/libraries. That's the usual advice, but on the other hand, I only need code as far as prototyping is concerned, maybe results would come faster if I skip to frameworks directly?
If my goal is just prototyping is it still bad idea to learn jQuery afterwards? I see a lot of bad reviews recently. Should I consider (and why) any other frameworks/libs like React? In other words are there any advantages of say React over jQuery for my purposes?
Can I still use css frameworks with JS Frameworks? The concept of latter is to complicated for my now and I wonder if they can be useful for prototyping purposes or it's just a tool for professional developers (so many options, so many tools!).
Thanks!

I think it's a good idea to keep learning JS to say intermediate
point,until I'll get into frameworks/libraries. That's the usual
advice, but on the other hand, I only need code as far as prototyping
is concerned, maybe results would come faster if I skip to frameworks
directly?
Often frameworks have a clear documentation of their functions and methods and therefore I think jumping into a framework directly would spare some time. On parallel learning JS is quite important in order to recognize JS formats and modify your requirements. I would just focus on a framework with a specific goal. Try to implement it and if you encounter some errors just google it, you will definitely find some stack overflow questions.
If my goal is just prototyping is it still bad idea to learn jQuery
afterwards? I see a lot of bad reviews recently. Should I consider
(and why) any other frameworks/libs like React? In other words are
there any advantages of say React over jQuery for my purposes?
It is never bad to learn jQuery. A lot of external libraries are build based on jQuery. I would really recommend this book: "Jon Duckett-
JavaScript & JQuery" which will help you understand the basics of jQuery. I do not see any advantages of React over jQuery. Perhaps some other people have different thoughts about that.
Can I still use css frameworks with JS Frameworks? The concept of
latter is to complicated for my now and I wonder if they can be useful
for prototyping purposes or it's just a tool for professional
developers (so many options, so many tools!).
Sure, JS Frameworks often only focus on creating dynamic content or establishing functionality within your prototype. It does not really influence your CSS. You can easily use for example node.js in combination with bootstrap CSS .

Should I use a MVC javascript framwork for this application?

I've been asked at work to convert a popular mechanical engineering excel application to a single page web application. It requires no database so my idea is to put everything on the clientside in javascript.
First version is gonna be pretty small but more complexity will be added further along. Canvas graphics is gonna be drawn in realtime as user changes input. So performance is important. My question is: Should I use a MVC framework such as Angular JS? Or is it better to stick with Jquery? If I should use a MVC, which one is best suited for this app?
Everyone at my company uses IE9 so I dont need any support for older browsers.

Angular bills itself specifically as a way to build CRUD apps - basically database front ends. The app you're describing doesn't sound like it's doing a ton of that, so Angular would probably be more trouble than it's worth.
jQuery is a helper library - it makes dealing with the DOM easier, but doesn't do a thing to provide overall structure to your application. jQuery is a "necessary but not sufficient" in my book - you're going to want it, but it's not enough on its own.
Personally, I'd lean more towards Backbone, specifically because it's so minimal - it gives you some useful data binding stuff and some hints on how to organize your app, then gets out of your way to let you build the abstraction you want. Based on the fact that you mentioned the original is in Excel, some sort of data binding / change notification system is going to be important. This way you can emulate the spreadsheet's "change a cell and the chart redraws" system that everyone's already used to.
In the end it's hard to say without more detail on the app in question, and what kind of calculations / how often they have to happen are. Figure out what your app architecture should be, find (or build) a library that helps implement that architecture. It might be MVCish, it might not.

Well jQuery will get very messy as complexity increases. Angular JS is an amazing library but there are also a myriad of different ones out there. Depending on the Mechanical Engineering principles you are working with using AJAX may prove to be more perform-ant, due to the lack luster power of some older browsers.
It really depends on the complexity of the calculations, but in terms of dealing with events and managin the structure I would suggest using Jquery as well as Angular on top of it. then make the decision about whether or not to move some functions to the server or not, based on performance.

Rich Javascript UI Frameworks, EXT, DOJO and YUI

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.

sproutcore vs javascriptMVC for web app development

I want to use a javascript framework with MVC for a complex web application (which will be one of a set of related apps and pages) for an intranet in a digital archives. I have been looking at SproutCore and JavascriptMVC. I want to choose one framework and stick with it.
Does anybody know what the distinguishing features are when comparing these two?
I want something that is simple, straightforward that I can customize/hack easily, and that doesn't get in my way too much, but that at the same time gives me a basis for keeping my code nicely organized, and event-driven. I also plan on using jquery substantially.
I know sproutcore is backed by Apple, and looks like it is getting more popular by the day, and it has a nice green website :), whereas JavascriptMVC looks less professional, with less of a following and less momentum behind it.
I've done the tutorials for both and I was impressed by SproutCore more (in the JMVC tutorial you don't really do anything substantial) - but somewhere in the back of my mind I feel that JMVC might just be better because it doesn't try and do too much - it just gives you MVC functionality based on a couple of jquery plugins, and you can use jquery for everything else, so its flexible. Whereas SproutCore seems to have more of its own API etc... which is also nice in a way... but then you're kind of stuck within that.... hmmm I'm confused :).
Any thoughts would be much appreciated.

Being a JavaScriptMVC contributor, I'm extremely biased. But I'll try to give the best answer I can.
JavaScriptMVC has also taken years to develop. But instead of focusing on ui functionality, it focused on the layers just below that. There are a few reasons for this:
You can find a jQuery widget to meet almost every need. There's no reason to compete these plugins. Instead, JavaScriptMVC tries to work with them.
Most people need one or two custom widgets / controls. JavaScriptMVC wants to make building and maintaining these pieces as easy as possible.'
Flexibility+API. I'm not sure exactly how to say this one ... but here's my best shot ... With JavaScriptMVC, we wanted every layer of the application to be as easy to understand and maintain as possible. This is why we picked jQuery as our low-level library. It's API is about the best abstraction for the dom possible. People typically go directly from the low-level API to build the Widget/Control. This is why most jQuery widgets' code look very dissimilar. We wanted a middle layer that organize our code and promote best practices, while providing enough flexibility to meet almost any requirement. So with JavaScriptMVC, you get very solid low and middle-level layers. But, you don't get widgets.
JavaScriptMVC has testing, error reporting, and documentation baked into the framework. The testing is the most impressive part. It has integrated selenium and envjs testing.
My recommendation would be to go with SproutCoreif your requirements can be built pretty straightforward with SproutCore. But if you know jQuery, have to build a lot of custom controls, or need really awesome testing, use JavaScriptMVC.

Funny, because just a month back or so, our team evaluated exactly these 2 frameworks head to head. We ended up choosing JavaScriptMVC, and I've been working hands-on with it for about a month.
I like it ... but, I was a HUGE proponent of SproutCore. I had never heard of either framework before we eval'd them, but once I saw SproutCore and looked under the hood, I was very, very impressed. Honestly, I don't think there's anything out there that can give you the kind of power it gives. Yes, you'll have a learning curve, but it's the kind of thing that lets one person accomplish the work of 5 or 10 once you know it.
So I'd use SproutCore in a heartbeat.
That being said, JavascriptMVC (aka "JMVC") is nice. It doesn't really give you a ton on top of jQuery itself. You will still have some infrastructure to build yourself (depending on how complicated your requirements are). This is both a pro and a con. One nice thing about it is that, if you need to dig into the details of some piece of JMVC, you can ... it is not so incredibly huge that it is impenetrable.
In summary, there's not a thing wrong with JMVC. But there is, in my opinion, nothing even in the ballpark with SproutCore.

I think that the main difference between them is that SproutCore includes a GUI while the JMVC is something low-level without any graphic, so if you need a GUI you can't use JMVC without including other scripts like the jQuery UI or jQuery plugins.
You said that "JMVC might just be better because it doesn't try and do too much" i don't agree with this, it took years before SproutCore 1.0 was released, so developers had the time to make a great product.
I suggest you to use SproutCore, maybe you'll have to learn more things, you'll spend more time to practice and understand everything, but you'll learn how to use a very good framework that can be usefull also for future projects.

Sproutcore-2.0 eliminates the ui-constraints and plays nice with completely custom app-uis.
http://blog.sproutcore.com/announcing-sproutcore-2-0/
http://blog.sproutcore.com/dispatches-from-the-edge-dropping-in-a-sproutcore-2-0-application/

Is it worth it to use jQuery for Ajax instead of building your own JavaScript?

Aside from the framework, is jQuery worth using rather than creating your own javascript? I've always debated if the framework was better to use than to create your own calls. Are their disadvantages of using it?
Sorry for beginner question, I'm trying to feel out if it would be better to use this and create some of the ajaxish workings of my site rather than develop it from scratch.
Are there other frameworks out there that would be better to use to create an ajaxish website?

Yes, jQuery is worth it. I speak as someone who resisted using any library for a long time, then finally saw the light.
I do recommend that you build some hand-rolled Ajax interactions before you dive into using jQuery for Ajax, so that you understand exactly what is happening with Ajax. Once that's achieved, though, let the library do the dirty work.

jQuery (and most other framework) are for making difficult things simple. It keeps you from having to write cross-browser compatabile code. It keeps you from having to write recursive methods to update multiple dom-elements. It basically cuts your development time down substantially, and saves you a lot of frustration.
Stackoverflow Archive:
Which Javascript framework (jQuery vs Dojo vs … )?
Great discussion (with lots of involvement) over various javascript frameworks. It will benefit you to browse this in depth, or even at a cursory level.
When should I use a javascript framework library?
Which Javascript Framework is the simplest and most powerful?
What JavaScript library would you choose for a new project and why?
Which Javascript Ajax Framework is most powerful and very lightweight?
Which javascript framework can be used for all browsers?

If you like reinventing the wheel, write your own. For me, I prefer to spend my time focusing on solutions rather than lines and lines of javascript code. I'll use JQuery to save resources and frustration

One thing I want to add is for the past couple of months, I was trying to fill a web developer position for my team, and it proved to be a difficult task.
Lots of folks knew how to use a JS framework (JQuery, ExtJS, YUI...), but once outside of the framework, they found themselves in an unfamiliar ground. I had a self-claimed senior JS developer with over 10 years of experience couldn't tell me how to use function.call() or function.apply() or how to implement simple inheritance in JavaScript.
Framework is great and definitely useful, but you will also want to make sure to know how to implement the basic OO concept and DOM manipulation without the framework.
BTW, we use ExtJS and if you are starting to pick a JS framework, you may want to look around to see which one suits you the most.

jQuery is a big project with many users. By that nature, it will be better tested than anything you write by yourself.
It is a great framework for most uses I've come to need.
Is there anything in particular you are trying to do?

jQuery helps you avoid worrying too much about cross-browser JavaScript issues, and helps you get things done quickly. As far as I'm concerned, the key reason for using it vs your own hand-rolled JavaScript probably is the "don't re-invent the wheel" cliché.

Apart from added productivity, JQuery's main plus is that it takes all (most) of the pain out of cross-browser testing.

There is no reason you cannot write your own code and splash in JQuery where needed. JQuery is incredibly lightweight for what it provides and you will quickly find that you can do most takes easier in JQuery (especially once you start using the plugins for it) than by hand. I am a big believer in not reinventing the wheel. The JQuery code is tested by tons of people and there are so many plugins to chose from I could almost guarantee that what I want to do has already been done before.
If you are starting with a clean site, now is the perfect time to take JQuery for a spin though, because if you do get hooked on it your code will be more consistent if you solve similar tasks using the same technique. Go give it a try :)

I would highly recommend using jQuery (or any comparable framework) over straight JavaScript. It just makes common programming tasks easier, most notably cross-browser development.

jquery makes js related work easier and more important standardised/compliant.
If you need re-assurance as to its use:
MS & Nokia are bundling it in their dev platforms.
Its compatible with many of the newest web technologies.
It has a large developer community supporting it.
There are many plug-ins available to aid RAD.
and more...
Give it a go!!

Definutly! Jquery wil save you a lot of time struggling over code and makes your code easier to read to non-experts.