|
I've been working mainly as a PHP developer but recently I've taken a dabble in javascript SPAs. So far I've written:
Each of these has basically been an index.html file with all the markup shown/hidden as necessary and a big 'ol script.js file full of jQuery for manipulating the HTML. The closest I've come to organizing these is writing functions instead of keeping everything in $(document).ready(); I've been looking at Backbone as a way to better write these apps but it feels like a leap to me, like I'm missing an intermediary step. A lot of the tutorials and guides I have read have been 'this is the syntax for a View' and I don't really feel like I know what code should be a view, what functions show go in these Views and which should go in Models e.t.c. I feel like I'm learning how to make the same todo app again and again without really understanding how to think about my app in a 'Backbone' way. Are there any resources I should read about OO jQuery before attempting to continue learning Backbone? I have gone through this article but still feel a little lost, like why are there two status classes with add() methods, one that just calls the other? Maybe it's just because Backbone is overkill for that really simple example? The fact the the code diffs are not formatted also make it quite difficult to read. FWIW I've found tut+ tutorials to be a mixed bag: some are genuinely interesting and informative whilst others, like the Backbone Contacts Manager tutorialare pretty badly written, contain typos in the code that prevent it running, skip over a lot and don't match the code in the downloadable source. nexus6 fucked around with this message at 15:08 on Jun 17, 2014 |
#
?
Jun 17, 2014 11:09
|
|
|
|
| # ? May 18, 2024 06:36 |
|
|
I'm a big fan of Addy Osmani. He's written two very comprehensive books on JavaScript design patterns (including OOP and MVC) and Backbone, both of which are free online: - http://addyosmani.com/resources/essentialjsdesignpatterns/book/ - http://addyosmani.github.io/backbone-fundamentals/ In short, models are for getting/setting your data and views are for presenting that data to the user. OOP and MVC are generally the same in JavaScript as they are in any language, but of course each library has specific differences. If you already understand OOP/MVC in PHP, I think it's safe to just start learning Backbone. There is no controller in Backbone, instead a view will contain most of that logic. The view then renders a templates that are more like the views from other MVC libraries. Addy Osmani posted:Models manage the data for an application. They are concerned with neither the user-interface nor presentation layers but instead represent unique forms of data that an application may require. When a model changes (e.g when it is updated), it will typically notify its observers (e.g views, a concept we will cover shortly) that a change has occurred so that they may react accordingly. Addy Osmani posted:Views are a visual representation of models that present a filtered view of their current state... JavaScript views are about building and maintaining a DOM element.
|
|
#
?
Jun 17, 2014 16:32
|
|
|
I tell you what, trying and constantly failing to install angular-phonecat or even angular-seed is making picking up this language REAL difficult to keep going with. bower just refuses to run the git to get the prereqs. It's windows 7 x64 and I've tried x86 node js, x64, tried installing bower globally, dropping it back a couple versions, cleaning the cache, deleting folders, in AppData or the project itself and it will still die. It does not help "support" seems to think that it's the developer who is responsible for figuring out how to make it all work even it calls for installing a loving virtual machine and installing debian. Sorry for the bitching but I want to like this framework, but I'm at my limit. code:git config --global url."https://".insteadOf git:// Connect over https instead of git port. EVIL Gibson fucked around with this message at 05:13 on Jun 18, 2014 |
|
#
?
Jun 18, 2014 05:02
|
|
|
I've about had it trying to get jQuery Mobile and React to play nice with each other. Can anyone suggest a UI framework that handles (nearly) as many mobile device use cases as jQuery Mobile that maybe isn't as opinionated about DOM manipulation and navigation? Looking for your standard web app UI elements like dialogs, touch friendly select menus, menu panels, etc.
|
|
#
?
Jun 19, 2014 02:04
|
|
|
I just started working through the KnockoutJS tutorials and it makes so much sense to me. Is it logical to learn this as an intermediary step to using Backbone?
|
|
#
?
Jun 20, 2014 12:57
|
|
|
nexus6: I think you can build entire apps using just Knockout, never learn Backbone, and you'll be fine. Or vice versa. Both libraries, along with every other JavaScript MV-whatever are all solving mostly the same problems. Knockout is more focused on the view layer and it adds two-way data-binding, which if you're coming from just jQuery, seems like a godsend. Backbone is more focused on RESTful interactions... but like I said, they can both solve the same problems: organizing complex code that allows users to interact with a lot of data. Chengiz: what about Twitter Bootstrap or Zurb Foundation?
|
|
#
?
Jun 20, 2014 18:24
|
|
|
EVIR Gibson posted:I tell you what, trying and constantly failing to install angular-phonecat or even angular-seed is making picking up this language REAL difficult to keep going with. I "installed" angular by downloading the files and putting them in a 'static/js' directory in my project. I feel like I don't understand Web 3.0 because apparently I was supposed to use Node.js and something called Bower to do this??
|
|
#
?
Jun 20, 2014 18:56
|
|
|
more like dICK posted:I was supposed to use Node.js and something called Bower to do this?? No you're not. Bower sometimes makes thing easier but if you don't feel like Bower would be a huge improvement to your workflow, there's no reason for you to switch to it. Get back on it later and see if you change your mind.
|
|
#
?
Jun 21, 2014 01:19
|
|
|
more like dICK posted:I "installed" angular by downloading the files and putting them in a 'static/js' directory in my project. Bower is just a package manager for website libraries. It handles things like dependencies and keeping your libraries up to date for you, like any package manager. So if you have AngularJS + Bootstrap + Bootstrap-Angular + UI-Router all together, it can get a bit frustrating to manage all of that. That's where Bower is great. Just using AngularJS? Drop that SOB in your JS folder. Or, even better, use one of the open CDNs for it (GoogleCDN is the official one @ https://developers.google.com/speed/libraries/devguide#angularjs ) -- no need to even download it in that case, and you might speed up your user's experience some too.
|
|
#
?
Jun 21, 2014 04:59
|
|
|
EVGA Longoria posted:Bower is just a package manager for website libraries. It's been a while since I've used Bower, but does it behave consistently? Last time I tried it, some packages would put their stuff in subdirectories, some wouldn't. Some would include non-JS assets, some wouldn't. Some would include version numbers, some wouldn't. In the end I'd still have to go through and figure out how the package named itself so I didn't see the value. Maybe I'm not using it properly or things have changed, though...
|
|
#
?
Jun 21, 2014 05:11
|
|
|
Kobayashi posted:It's been a while since I've used Bower, but does it behave consistently? Last time I tried it, some packages would put their stuff in subdirectories, some wouldn't. Some would include non-JS assets, some wouldn't. Some would include version numbers, some wouldn't. In the end I'd still have to go through and figure out how the package named itself so I didn't see the value. Maybe I'm not using it properly or things have changed, though... IIRC it's literally a git wrapper. It just goes to the git repository for the project, finds the right tag, excludes a bunch of files that somebody specified and downloads the rest.
|
|
#
?
Jun 21, 2014 16:56
|
|
|
Angular, Knockout, etc. are all just personal preference. All they do is connect your front-end with your back-end. ...you know, going by that description, I feel like somebody really needs to create TaintJS.
|
|
#
?
Jun 21, 2014 17:56
|
|
|
more like dICK posted:I "installed" angular by downloading the files and putting them in a 'static/js' directory in my project. Yeah, it's getting pretty stupid. I started dicking around with React and was looking at some routers for it, and all the README files are basically "npm install butt-router-lol" and that's it. Nobody even bothers with ".. Or just copy this one file into your js directory" any more. My favorite is the React-Flux-TodoMVC example (http://facebook.github.io/react/docs/flux-todo-list.html) Paragraph 2 is basically "grab react-boilerplate, and then do all the npm install crap to get started." Paragraph 3 is "Oh, btw, the settings in the boilerplate package.json file all need to be changed to work with this tutorial. Look at our package.json file and figure it out."
|
|
#
?
Jun 21, 2014 20:06
|
|
|
Lumpy posted:My favorite is the React-Flux-TodoMVC example (http://facebook.github.io/react/docs/flux-todo-list.html) Paragraph 2 is basically "grab react-boilerplate, and then do all the npm install crap to get started." Paragraph 3 is "Oh, btw, the settings in the boilerplate package.json file all need to be changed to work with this tutorial. Look at our package.json file and figure it out." I agree, that's pretty gross. I'll bring it up with the team.
|
|
#
?
Jun 21, 2014 21:24
|
|
|
NovemberMike posted:IIRC it's literally a git wrapper. It just goes to the git repository for the project, finds the right tag, excludes a bunch of files that somebody specified and downloads the rest. Yeah, this. It's basically all up to the package author how it's laid out. Half of them are just dist files, half are a full distribution including src and tests. It really is crap, but it's the kind of crap that comes about when working backwards with no central authority.
|
|
#
?
Jun 22, 2014 19:30
|
|
|
EVGA Longoria posted:Yeah, this. It's basically all up to the package author how it's laid out. Half of them are just dist files, half are a full distribution including src and tests. It really is crap, but it's the kind of crap that comes about when working backwards with no central authority. So really, Bower should come with the caveat that it's only useful if you buy into the whole webdev toolchain: Setting up your package such that it can install all its dependencies, setting up your repository such that it ignores Bower's mess, use a task runner in such a way to build something that doesn't include all the extra cruft, etc.
|
|
#
?
Jun 22, 2014 20:04
|
|
|
So glad it's not just me that gets pissed off that every github repo's 'usage' instructions is just "install with node". I still can't figure out what the heck node is for anyway.
|
|
#
?
Jun 22, 2014 22:24
|
|
|
Granted, it's not a perfect system and has a long way to go, but it still beats searching for a certain file/lib, downloading it, find all the dependencies, download those, unzipping, moving all the files to the proper directory, etc. Also, on bower.io you can search through all the packages and see the github rating and when it was last updated. Nothing more frustrating then finding a library to use, only to discover that it hasn't been updated for over a year, or nobody uses it. But yeah, some sort of bower guideline to only include the main files, a minified file, dependencies and (good) readme would go a long way.
|
|
#
?
Jun 22, 2014 22:32
|
|
|
Bower is a step in the right direction. It's even a good first step. It could really use a central authority dictating some guidelines (release in the package, source in package-devel for instance) and enforcing them.
|
|
#
?
Jun 22, 2014 22:57
|
|
|
EVGA Longoria posted:Bower is a step in the right direction. It's even a good first step.
|
|
#
?
Jun 26, 2014 04:08
|
|
|
Debian packaging is easy. Step 1: write some code that people want to use. Step 2: let them deal with packaging it for Debian.
|
|
#
?
Jun 26, 2014 04:48
|
|
|
Does anyone here make games with HTML5 canvas and JS? It's something I'd like to learn more about. Is there a separate thread for that?
|
|
#
?
Jun 26, 2014 12:37
|
|
|
I think I want to use React and Bootstrap together in a project. The reason is that React seems pretty nifty for building view components, and I like Bootstrap's layout, especially the responsive layout bits (from the little I've seen over a coworker's shoulder). How dumb am I and how hopeless is this? Have I completely misunderstood what Bootstrap is for even?
|
|
#
?
Jun 27, 2014 10:55
|
|
|
Wheany posted:I think I want to use React and Bootstrap together in a project. The reason is that React seems pretty nifty for building view components, and I like Bootstrap's layout, especially the responsive layout bits (from the little I've seen over a coworker's shoulder). Eh. Its fine, you'll be doing an awful lot of component making and class names will be flying everywhere, but bootstrap/foundation whatever is fine if you're looking to get something off the ground. The thing about React is you really need to be strict about determining what your components actually are. Try to avoid building the markup for a whole view in one render function, trying to conform to bootstraps markup needs. You'll just make things hard to maintain down the track.
|
|
#
?
Jun 27, 2014 11:36
|
|
|
Wheany posted:I think I want to use React and Bootstrap together in a project. The reason is that React seems pretty nifty for building view components, and I like Bootstrap's layout, especially the responsive layout bits (from the little I've seen over a coworker's shoulder). It works just fine. I've been using Bootstrap with React for a couple months...
|
|
#
?
Jun 27, 2014 15:07
|
|
|
I make primarily non-database driven websites. Would learning Angular benefit me at all?
|
|
#
?
Jun 30, 2014 16:10
|
|
|
caiman posted:I make primarily non-database driven websites. Would learning Angular benefit me at all? Maybe, it's pretty cool. I use it for dynamically loading content instead of the old mess of jquery ajax methods I used to use. You can use ngRoute to associate a url with a template file that'll load into the main view section of your page. So the url changes between views and the back button works, but you don't have to refresh the page. (the only issue is that urls look like site.com/#/news instead of site.com/news) You can also use angular to add "active" classes to nav links etc. Basically a lot of stuff I use to use jquery for I now do in a much cleaner / neater way with angular (except animations, because that poo poo confuses the hell out of me).
|
|
#
?
Jun 30, 2014 16:36
|
|
|
nexus6 posted:Does anyone here make games with HTML5 canvas and JS? It's something I'd like to learn more about. Is there a separate thread for that? Three.js is pretty great for 2D / 3D browser stuff. I made an asteroids clone with it a while back.
|
|
#
?
Jun 30, 2014 16:59
|
|
|
caiman posted:I make primarily non-database driven websites. Would learning Angular benefit me at all? Just the UI state management in a sane and rational manner works for me. Then again I hate UI.
|
|
#
?
Jun 30, 2014 18:06
|
|
|
caiman posted:I make primarily non-database driven websites. Would learning Angular benefit me at all? Angular is cool, but be sure and look at Facebook's React as well if you're just looking for new things to learn to make building interactive websites easier. It clicks with me more than Angular. -- I've been looking at Google's Polymer for an hour or so as I think their new Material Design is fantastic looking. Polymer is a pretty slick take on Web Components. I'm not sure how useful it will really be, though. The big sticking point for me is that right now I don't see how to get it to work with React (which most of my current projects are built with), and it doesn't seem to offer enough to replace React.
|
|
#
?
Jun 30, 2014 21:39
|
|
|
fuf posted:(the only issue is that urls look like site.com/#/news instead of site.com/news) They don't have to! https://docs.angularjs.org/guide/$location and HTML5Mode settings. Has anyone had a play with Polymer yet? Any thoughts so far for building any non-trivial apps? excidium fucked around with this message at 02:24 on Jul 1, 2014 |
|
#
?
Jul 1, 2014 02:20
|
|
|
Thermopyle posted:Angular is cool, but be sure and look at Facebook's React as well if you're just looking for new things to learn to make building interactive websites easier. It clicks with me more than Angular. It seems really nice if you want to play with all the Google stuff at the same time. I mean, using AngularDart alongside Polymer.dart has been pretty good for me. Granted, I couldn't imagine using the Dart Editor to actually edit anything.
|
|
#
?
Jul 1, 2014 04:25
|
|
|
Aren't Polymer components basically like directives on steroids? Our current project relies on Angular a lot and we should make more directives, but I'm wondering if Polymer components would not be a good thing.
|
|
#
?
Jul 1, 2014 06:17
|
|
|
Whats the name of the form element that contains selectable items and you can hold shift/ctrl to select more than one? I have seen it used, for example, as a location selection for job search websites.
|
|
#
?
Jul 6, 2014 19:33
|
|
|
Corla Plankun posted:Whats the name of the form element that contains selectable items and you can hold shift/ctrl to select more than one? A select menu with "multiple" attribute. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
|
|
#
?
Jul 6, 2014 19:53
|
|
|
Skiant posted:I'm wondering if Polymer components would not be a good thing. The drawback of using Polymer is it doesn't play nicely with older browsers.
|
|
#
?
Jul 6, 2014 21:26
|
|
|
Huragok posted:The drawback of using Polymer is it doesn't play nicely with older browsers. In before "don't you mean bonus?" Though, to be honest, I think we are at a point where legacy browsers can be ignored for modern web apps. The auto update processes in every browser are a lot better, I don't see much old school usage.
|
|
#
?
Jul 6, 2014 23:22
|
|
|
EVGA Longoria posted:In before "don't you mean bonus?"
|
|
#
?
Jul 6, 2014 23:58
|
|
|
EVGA Longoria posted:In before "don't you mean bonus?" Sadly most of our customers don't give two poo poo about tech and probably use old Dell laptops they bought in the 1990s and never updated anything.
|
|
#
?
Jul 7, 2014 07:16
|
|
|
|
| # ? May 18, 2024 06:36 |
|
|
EVGA Longoria posted:The auto update processes in every browser are a lot better, I don't see much old school usage.
|
|
#
?
Jul 7, 2014 10:57
|
|