Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
kbear

Flex Vs. Edge

Recommended Posts

Hi Larry,

 

Would you advise me on how to proceed with a project.  I am wondering what tools you would recommend to 're-do' the capablilites created here with Flex.  www.unlockspanish.com

 

Would Edge w/ javascript be a good alternative, or something else.

 

I'm wondering also if you think Apache has breathed new life into Flex with it's 4.9 release.

 

 

Thanks in Advance.

Share this post


Link to post
Share on other sites

Just my two cents, but assuming you have all the resources at hand, the interface looks pretty easy to recreate using only JS.

As such, I'm not sure why you'd need/want to use Adobe Edge to recreate it.

I would think that a more popular JS library (like jQuery) with its built-in animation functions would be more than enough.

 

In particular, what functionality are you concerned about being able to recreate?

Share this post


Link to post
Share on other sites

I don't have much faith in Flex for the long run. I like Flex, but Adobe's abandonment of it, plus the fact that Flash does not run on many devices, leads me to conclude that JavaScript would be the better way to go. I'm not familiar with Edge, however. 

Share this post


Link to post
Share on other sites

Thanks both!

 

>In particular, what functionality are you concerned about being able to recreate?

 

Well, I'm not a programmer, so my ability to discuss these matters is a bit limited.

 

Scalable display based on browser window size (down to 625 px min, 800 px max).

Dictionary (upper right corner) has type-ahead feathers, plays mp3 file on enter key.

Focus List button makes list of words, visible when clicking Focus list tab.

Test tab presents (randomly) chosen words from Focus list.  If user just hits Enter key repeatedly, correct answers are displayed and test repeats.

Verb conjugations button displays data from database (when verb in dictionary box).

In-Depth button displays some text/audio data that is currently created as Adobe .swf docs.

 

That's pretty much the whole thing.  I guess it sounds like I should pursue having it done with javascript.

 

 

So, is this Abode edge (for animation) anything that is worth learning as a flash (swf) replacement?  http://html.adobe.com/edge/

Share this post


Link to post
Share on other sites

I personally prefer vanilla JS (i.e., JS without the use of libraries), but in your case, jQuery (the most popular and widely-used JS library) is sounding like a good choice to simplify a lot of the things you want to do.

Going down the list of features you want:
- Yes, resizing the app window to the full-size of the browser window is very easy with jQuery. You can also set up an event handler that will resize the app window when the browser window size is changed.

- Yes, type-ahead is very possible. It's usually called autocomplete though, and jQuery has an autocomplete extension, which makes setting it up fairly painless.
As for playing MP3s, the key press to play the file is very simple (JS and jQuery support events for all sorts of keyboard and mouse inputs), but actually playing the file may be a bit complicated.
In all browsers that support HTML5 (basically all browsers except IE8 and lower), there is an audio element, which makes playing audio very easy. However, for those older browsers (if you want to support those older browsers), you will have to use object elements and the like, which is a bit trickier.

- As for everything else, it's all pretty easy. It's just a matter of setting up click event handlers to load different data into the main content area when different buttons are clicked on.

And just a couple of other thoughts:
- Looking at the site you linked too, (aside from the audio data), there doesn't seem to be that much data for the site. As such, you may want to load all the vocab data from the DB into a JS object when the site is first loaded for easy and quick access to everything.
If you don't do that, you will likely have to use Ajax to get the data, which will make things more difficult and slow things down.

- I wouldn't worry about the Adobe Edge thing. Larry gave plenty of reasons why not to stick with Flex/Flash. Use only JS/jQuery, and you'll be fine. jQuery also has an animate method, which makes animating anything quite easy.

- If you're not sure how to do something, simply doing a web search for jQuery + whatever you want to do should quickly get you some answers.

Good luck, and ask about anything else you want to know.

Share this post


Link to post
Share on other sites

This is a huge help Hartley.

 

Regarding loading to JS Object,

 

>  you may want to load all the vocab data from the DB into a JS object when the site is first loaded for easy and quick access to everything.  If you don't do that, you will likely have to use Ajax to get the data, which will make things more difficult and slow things down.

 

There are about 7500 word pairs in the dictionary, then about 250 sentences (in the center/main box).  Would this loading happen rather quickly for newer (2-3 years max) pcs and ipads?

 

Thanks again!

Share this post


Link to post
Share on other sites

 

There are about 7500 word pairs in the dictionary, then about 250 sentences (in the center/main box).

 

This is a little more than I expected. The best advice I can offer is to actually perform some testing by downloading all the vocab when the site first loads and storing it in a JS object, and seeing how long it takes to do all that.

My guess is that the end-user's computer (e.g., a slightly older, slower PC) should not affect performance that much at all. I could be wrong, but I imagine a majority of the wait time when the site first loads would be involved with downloading all the data from the DB and organizing it into a JS object, which is mostly handled on the server side.

 

As for a one-time load, it can be with HTML5 browsers, but with older browsers (again, IE8 and below), you may have to download all the data each time (which seems to be how the current site works anyway, so not a big deal, I think).

With HTML5 browsers, you can use local storage to store all the data locally once it's downloaded from the DB one time, but for older browsers that don't have local storage, you may have to download it each time.

Older browsers still have access to cookies on the JS side, but cookies can be a pain to manage, and cookies have a limit of 2 MB, so if all the data exceeds 2 MB, then you will have to download it every time from the DB.

 

I hope all that helps.

Let me know if you have any more questions.

Thanks.

  • Upvote 1

Share this post


Link to post
Share on other sites

Hello again all,

 

I've had someone suggest I use the Extjs/YUI framework (I think he perhaps meant Extjs/Yii) for the UI to make it 'display nicely on all browsers and devices'.

 

Does this sound like a reasonable suggestion.  I had been thinking the the UI might just be made in html5 using Dreamweaver or equivalent.  Don't hesitate to correct my ignorance if necessary :)

Share this post


Link to post
Share on other sites

Ext JS is one JavaScript framework and YUI is another. In loose terms, either does the same thing as jQuery or any other JavaScript framework in terms of making your site work properly on all browsers and devices. 

 

Also keep in mind that JavaScript is largely about functionality. The "display" and much of the UI are dictated by the HTML and CSS.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...