Chrome, Webpack, Browserify and some tutorials

Used this to create a chrome extension:

https://robots.thoughtbot.com/how-to-make-a-chrome-extension#load-your-extension-into-chrome

Building the chrome extensions turned out to be not so simple. Communicating between the webpage and the extension was not that simple, especially when trying to integrate React also. Also I was using create-react-app, which does not give me the control I want over the build process. So I may consider using webpack to build the app, instead of create-react-app.

Decided to leave it for a while, and do a few React tutorials which would improve my skills in React, Webpack, Browserify, and Redux. Perhaps once I have complete these, I will be in a better position to build out the chrome extension.

Did a tutorial on Browserify today, and some reading on what exactly browserify and webpack do, and why they are needed. They are basically bundlers and transpilers, which means figure what the dependinces are in the application, and they rebuild the application into static html, css, and js files, with the js scripts inlcuded in the correct order so they can work properly. The transpiler function turns the code to vanilla javascript, which is useful since it means new ES2015 javascript features can be used, without worrying if the browsers will be compatible or not, since the ES2015 javascript is broken down to vanilla javascripts which can be read by all browsers.

I liked this description of webpack and why it is needed:

webpack is a module bundler that constructs a web application from given assets.

Web applications are made from combining many types of native assets (JavaScript, CSS, images), transposed assets (coffeescript, templates, sass) and third party assets (npm, bower, downloaded). Each of these assets are also commonly split into smaller and more manageable chunks. webpack treats all of these assets as modules and intelligently constructs those modules into a web application.

In a raw web application, a user creates HTML, JavaScript, CSS files and then includes them in their HTML via script, link and style tags. As the amount of files required to piece the application together increases, this practice can become quickly unwieldy. Especially as order is important when loading web assets. webpack solves this by bundling all those files into one or sometimes many files and loads them in the correct order as needed.

There is a staggering amount of open source code available but unfortunately there isn’t a clear, single place to download and use third party code. Whether you’re installing modules using npm, bower, jamjs, component or manually downloading and extracting files; webpack can be configured to load modules seamlessly from those sources.

 

Now doing a tutorial on building a React App with browserify also. It has separated the React components as UI Components, and Container components. With the UI components the are only dealing with presentation, as all the data is being passed to them through props, and they update the date through callback functions to the Container Component. Using a similar them I should be able to build my Keyword Finder app better. I did sort of build it along those lines, though this just made it clearer what the actual file structure should look like.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s