FBJS for complex applications - javascript

I started looking at FBJS to build some complex application that has to be within a tab on a fan page. Since my first option of using iframes are out till Facebook puts that functionality in, I have to resort to using the sanitized FBJS.
I was wondering if anyone has done really complicated apps using FBJS? Besides DOM manipulations, how does it stack up against the usual JS?
I looked at the documentation online on the developers page, but all the samples there seem pretty basic. For example, I would need to access ActiveXControls/plugins, generate iframe on the fly and then append content into the iframe, etc. Does anyone think this would be doable in FBJS?

If you need to access custom ActiveXControls you won't be able to do it in FBJS. FBJS obscures global variables so you can't access them. I'm pretty sure that Facebook allows iframe applications in tabs on fan pages though. How are you adding the content?

Related

Logging in to target.com with script

I am new to the world of programming so I am trying to make a simple login script that will log me in to target.com when ran! Eventually I will want to add other things to it but I can’t seem to figure out the best way to do this. Any tips would be appreciated!
Using a tool like Puppeteer or Selenium can be used to automate browser tasks.
The basic idea is to use the tool to navigate to the website url, then while on the page you have to get references to the DOM elements you want to interact with. Once you do that you can use the tool to simulate events like clicking, typing etc.
However, logging in to sites like Target using scripts poses issues because they have ways to guard against automated scripts accessing their site. Some defenses include setting up Captchas and examining request headers.

What problems does javascript frameworks like React/Angular solve?

I am new to React js and I have been trying to understand what real problem does js frameworks like React,Angular solve and why one need to learn them.
Of Course when i see advantages of framework everybody talk about "Shadow/Virtual DOM, Router, Reusable Components etc" , but then I stumbled upon below links which talk something different
https://medium.com/dailyjs/the-deepest-reason-why-modern-javascript-frameworks-exist-933b86ebc445
https://www.codementor.io/binarymuse/react-components-from-a-jquery-programmer-background-du107k2lz
but they were not clear to me
So i am meaning to understand how difficult it was to maintain js/jquery code before these framework came by.
Everybody is just asking to learn these frameworks because they are popular but none of them clearly explains why they are popular and what problem they solve and how they make our life easier when it comes to creating web-app from scratch.
Others have already mentioned the advantages and what these frameworks resolve.
I wanted to add what problems they can create:
I have seen many people that use a framework see it as a hammer and every website as a nail. In other words they either don't or can't figure out that in many cases a framework is not needed. I have seen web pages that are nearly 90% static data still download an entire framework just to provide drop menus or something else trivial.
Frameworks force you into a lifecycle and development style that, in some ways, make some things easier and other things much, much more complicated. AngularJS had a nasty digest cycle that often led to complications. Redux forces you to write much more code than needed just to handle state that on many pages is not needed. Vue, React, Angular all force you to either use their data creation functions, their way of rendering or their way of handling inter element communication. And none of these are faster than vanillaJS. Even virtual DOM has its issues.
The size of a framework is often much more than needed. I have several small libraries that do the majority of the work that a framework does but my code is in the sub 5K range if I load it all.
Some people that learn a framework first can not figure out how to write in raw JavaScript. They also tend to learn sloppy ways to write code. No, not everyone, but a large number people that did not start with vanilla JS write code that tends to be much larger and sloppier than needed.
It is best to avoid JavaScript except where really needed. Often I can use raw HTML and CSS to do everything I need to do. I find that it is rare that I need to use much JavaScript even in projects that exceed several thousand files. It is faster to allow the browser to process HTML and CSS, which all processes at compiled speeds and only use JavaScript for things you can not do in HTML and CSS.
You don't "need" to learn them, but many people and companies use them. The main advantage is being able to have your entire site on a single webpage, where you just modify the data and it handles changing the elements on the page for you. For instance, you can just think about "put the user's name here, and when they click the button, add another list field there", but you no longer have to think about "get this DOM element, set its innerHTML to the user's name, and when they click the button, create a new DOM element for input, another one for the label, get the container element, append the new children". It also allows you to more easily bind data to DOM elements, so you can just say "this field is for the variable 'numberOfItems'" instead of worrying about grabbing the DOM element and its value and storing it into numberOfItems when you need it; with React/Angular/etc. that variable will always be up to date with the user's input without you needing to update it.
TL;DR: The frameworks are not necessary, but they help automatically handle a lot of common, tedious DOM manipulation for you in a way more optimized than you'd likely end up implementing yourself, with less code for you, and all on a single page instead of having to reload the page every time you want to display new data or a new layout.
What is React JS?
ReactJS is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It’s used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components.
React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. It works only on user interfaces in the application. This corresponds to view in the MVC template. It can be used with a combination of other JavaScript libraries or frameworks, such as Angular JS in MVC.
https://www.c-sharpcorner.com/article/what-and-why-reactjs/
This is a wide discussion about frameworks in general. Is easy to say React, Angular and so on makes easier to manipulate DOM elements and reuse components, but to apply frameworks usually are about if solve your problem.
in javascript we have load the webpage by using location.href but by using angular/react we the page updates automatically.

Javascript Single Page MVC from scratch

I just wondering what is the technique of creating a single page website by using javascript without using framework like ember js / angular js.
For example in php like they can get
example.com?view=homepage
Can easily get the view and load/display homepage and load homepage's content.
What if in javascript if want to load another page/content?Any technique for building it?
I just building with a simple function like
$("#otherpage").hide();
$("#homepage").show();
I don't know is it the best way to develop a javascript single website page with this way?Or any technique that you all can suggest, cause I need learn from basic, need use javascript to explore and create a single app page without php.
Thanks lot
If it was that easy, do you really think Ember, Spine and Angular would be that widely used?
Snarky comment aside, building a page that refreshes like what you've done, while simple and rather easy to modify, falls very short on quite a few things:
For sites larger than a couple of pages, your HTML markup will become MASSIVE. Not just that, but you'll have to run every single piece of code on every page...per page. Say hi to insane overhead, both on bandwidth and on server-side processing, even with caching.
If you want to dynamically update part of a page, you'll need to use AJAX anyway. Why would it suck to write stuff using an MVC approach from the get-go, rendering data as you go along with AJAX, rather than brute-feeding the entire DOM?
What is the problem with Angular, anyway? Widely used, bug-free, unit-tested, built by reliable people, and if a bug does go through, you can be sure that the community will fix it quicker than you could
If the last comment didn't dissuade you from building your own to replace an already-existing platform, I would strongly recommend you build your JS to be fed data (JSON or otherwise) from your server and to dynamically update the page. You might not want the full-blown MVC approach, but at least the MV part of it. This will also allow modularity.

What is the simplest way to create a very simple widget that can be used on remote sites?

For example, I have a super simple widget that I want to allow my users to use across sites:
<h1>Headline</h1>
#mingyeow is the name of the user
<% render "/questions/mingyeow" %>
What would be the easiest way to do?
exact method to allow this
javascript vs iframe
cross site security concerns
I would recommend using an IFrame.
The reasoning behind this is simple:
If it is definitely just a "simple" widget you're looking to render, then you should be able to design it with a specific set of dimensions in mind.
IFrame will straight up ensure you have a secure way of rendering the widget off-site, and prevent unscrupulous third parties from modifying this widget in any way (and misrepresent the data you're trying to show, or the branding of your product/service).
Easiest for third parties to set up.
You won't step on the toes of the third party, and they won't step on your toes either. Meaning any weird CSS selectors they have, third party JS libraries, etc. None of that will be able to affect your widget.
A Dynamic Image would easily be the best, all web developers, new and experienced (you would hope) should be comfortable with images, images render exactly the same across all browsers, and give you the greatest control over layout. Here's a quick tutorial on how to create a dynamic image using ruby.
Otherwise I'd go for JavaScript which replaces something like <div class="mySiteWidget"></div> with your code using DOM functions. Although that's just a personal thing I have against frames, I find them clunky.

In what ways is JavaScript restricted when making a Facebook app?

I've been asked to do Facebook apps. Before I commit to anything, I want to know how easily a game can be moved to Facebook? (I'm completely comfortable making games in JavaScript in the browser.)
Does Facebook filter the JavaScript in some way? Can I use jQuery or other JS libraries? Can I do animation by altering the DOM on the fly? Is it best to go with an iFrame or use FBML?
I've done some poking around the Facebook dev site. But I'd like to hear from someone who's done it what the learning curve is like.
JavaScript in the Facebook context is different inasmuch as it all will get rewritten as it goes through Facebook. To get a sense of the differences (of which there are many), start with the FBJS Documentation. The getting started guide is a good primer.
The site that will become your bible is wiki.developers.facebook.com, it is canonical in terms of the FB platform. Additionally, as we all have come to know and (love? hate?) the Facebook platform is a moving target, so it's useful to keep up with things via the Developers Group on Facebook. I also like the blog Inside Facebook.
Most providers who allow developers to
embed JavaScript within their domain
force developers to use iframes to
sandbox their code. Facebook has taken
a different approach to this problem.
JavaScript that you give us gets
parsed, and any identifiers (function
and variable names) get prepended with
your application ID. For example, the
following code block:
function foo(bar) { var obj = {property: bar}; return obj.property;
}
becomes:
function a12345_foo(a12345_bar) { var a12345_obj = {property: a12345_bar}; return a12345_obj.property; }
This creates a virtual scope for every
application that runs within Facebook.
From there we expose certain
functionality through a collection of
JavaScript objects that allow you to
modify your content on Facebook. Our
objects are made to mimic the
functionality of JavaScript as closely
as possible, but it may take some
getting used to for people who are
already adept with JavaScript.
Many items which are simply elements in plain JavaScript must be accomplished with special method calls in FBJS. For example when referring to a form field's value in JS you use .value, whereas in FBJS you need to do .getValue(). It's these differences that prevent simply cutting and pasting JS from elsewhere into Facebook.
That's a basic primer. That should get you started. Best to you!
The simple solution is to wrap your entire game inside an iFrame. FB itself filters out a lot of javascript calls - basically, anything involving the window or document objects probably won't work.
Not too hard I would say, since you already have the ability to program a game, it should be fine for you to program a facebook app, as well as migrating a game to facebook.
as far as I know, with FBML your javascript will be rendered useless (yes your javascript will be filtered)
so you will have to use iFrame, which your javascript will remain functional (as long as your javascript doesn't touch the fbml tags)
Facebook api documentation is notoriously bad.

Categories

Resources