Build Your First React App with Sencha Grid in 10 Minutes

Posted Jun 24, 2017

Guest post by Sandeep Adwankar. Sandeep is a Sr. Product Manager at Sencha and is passionate about innovations in mobile and web technologies. He has experience working for startups in Silicon Valley as well as large companies including Motorola and Time Warner Cable. He has an MBA from DePaul University in Chicago and a Masters in Technology from IIT Bombay.

Sencha ExtReact provides all the components a React developer needs to build winning web applications. You get components that work together, interact with each other seamlessly, and are professionally built, tested and maintained. So you can focus on building your app for the competition, not the components.

You can build your first React app with the ExtReact Grid component in less than 10 minutes. It's really easy to get started. Just follow a few simple steps, and you have a functional React app.

  • Make sure you have a Node environment set up

    First, make sure you have Node 6+ and NPM 4+ set up on your system. You can download the latest Node version from Node web site. If you’ve already installed Node, you can easily check the node and npm versions by using these commands:

    node -v

    npm -v
  • Get your login credentials for the ExtReact NPM repo

    ExtReact NPM packages are hosted on Sencha’s private NPM repo. You log in to that repo once to get access to all ExtReact packages.

    To get login credentials, go to the ReactRiot ExtReact Evaluate page and fill out a few fields. We'll send you an email containing login details as well as links to download Sencha Themer tool and links to examples and docs.

  • Login to ExtReact NPM repo and get Yeoman generator

The next step is to log in to Sencha’s private npm repo, which hosts the ExtReact packages. Use your npm login provided in the email to associate the repo with the @extjs scope, and enter the credentials when prompted.

    npm login --registry=http://npm.sencha.com [email protected]

The next step is to install Yeoman generator and ExtReact generator package.

    npm install -g yo @extjs/generator-ext-react
  • Create your first React App

Run the Yeoman generator to create a your first ExtReact app

    yo @extjs/ext-react

The generator will ask you to name your app, name the npm package, and select a theme. The default Material theme (based on Google's Material design guidelines) is a good choice as a starting theme. The generator will also prompt you to create a new directory for your project. The generator will then download and create your sample application, including relevant dependencies.

  • Run your React App

In the generator output, you will find steps to run your application. It is as simple as changing to your new application directory and running the application using:

    npm start

This will fire up the app, making it available by default on localhost port 8080. Your first react app shows a basic left-hand nav bar and a simple grid with the sorting and searching controls you would expect. You can customize the grid component in the application with 100+ props that you can find in Grid API docs. image alt text

The project is preconfigured with the ExtReact Babel plugin, which allows for ES 6 syntax in source files and clean import syntax for ExtReact components. The Webpack configuration ensures the app uses the theme chosen during generation. The theme itself resides in the ext-react/packages/custom-ext-react-theme directory.

  • Build your winning React App

You now have a great starter app that you can turn into a winning app by using 115+ beautiful UI components. On ExtReact Github, you will also find a comprehensive conference application reactor-conference-app that supports mobile, tablet, and desktop. It uses redux and react-router and you can see it running here.

Good luck and happy hacking!


Automate all @#%! tasks!

Posted Jun 24, 2017

Welcome to the React Riot Hackathon. We are excited for you to get your hands on our new preview product Visual Studio Mobile Center. We created Mobile Center to help you spend more time creating awesome apps and less time on the repetitive task. We do this by bringing together lifecycle services like build, UI testing, and distribution with continuous monitoring of crashes and user analytics. Here is a quick cheat sheet on how you can best leverage Mobile Center during the Hackathon.

  • Build & Continuous Integration: If your React app is hosted on GitHub, Mobile Center can be configured to automatically build and sign your React apps on every commit. Even easier, most of the configuration is automatically detected! For Android. For iOS.

image alt text

image alt text

  • Track your Crashes: Quickly & easily copy paste to integrate the Mobile Center SDKs into your app to start gathering user analytics and crash data. Our crash SDK can send both native and JavaScript stack traces to the service so you can see the exact statement in the source files causing your application to crash. Collecting crashes works for both beta and live app and can help you fix the crash fast.

image alt text

  • App Analytics: Just like crashes, the SDK for analytics is very easy to get going. Once setup, Mobile Center analytics automatically captures session count and device properties like model, OS version, etc. You can also setup your own custom events to measure what matters to you.

image alt text

  • Push Notifications: For both iOS & Android, Mobile Center Push enables you to send notifications to users from the Mobile Center portal. For Android. For iOS.

image alt text

Try out Mobile Center and let us know what you think!

You can check out all of our documentation for React Native developers here.


Go Native for React Riot!

Posted Jun 23, 2017

React Native has become a powerful option for building mobile apps using Javascript and React. Many React Riot participants have asked if they can build their entry using it. Traditionally, it's been difficult to judge native mobile apps for our other hackathons because judges would have to install apps on their phones which has proved to be a barrier, so these entries ended up with fewer votes.

Luckily our friends at Expo have a great solution for us. If you build your entry using React Native, and publish it to Expo, you'll only need to post your "expo.io" project link as your entry. Judges just need to install one app, and then Expo provides a landing page where any app can be loaded within in (using a qr code or by entering the url).

If you’re new to React Native entirely, the easiest way to get ramped up on React Native is to follow guides at http://reactnativeexpress.com/ before jumping in to Expo.

Expo has full docs and a quick Start guide here: https://docs.expo.io. You can try out some components in your browser and get a feel for it with https://snack.expo.io/.

When submitting your application for judging, just use your project's published Expo url, e.g. "https://expo.io/@community/native-component-list"

This is what your project install page will look like:

If you decide to build a React Native app this weekend, please make sure to also upload a video demo of your app, and a screenshot (our automatic screenshotting service won't really work, it'll just snag a screen of the Expo page).


Make Awesome Visual Hacks

Posted Jun 23, 2017

Make Awesome Visual Hacks

image alt text

If half of the brain’s processing power is involved in visual processing, there’s little surprise using images (and videos) make web and mobile apps so much more compelling to users!

When precious hackathon time and resources are needed for creativity, Cloudinary’s image and video easy-to-use and powerful APIs are the unfair advantage in a developer’s tool chest. From uploading and storing images, to manipulating and transforming them, to optimizing and delivering them reliably and efficiently to users’ devices, Cloudinary does it all.

Using Cloudinary’s features and simple syntax, in combination with React components, is a natural and powerful match, as will be demonstrated below.

Uploading Images

Depending on the hack you’re building, images have to come from somewhere, which would typically be users’ devices or cloud servers. Luckily, Cloudinary’s upload widget makes it easy while providing a slew of useful features such as interactive cropping. Recent enhancements to the widget even include uploading from popular social media sites

Manipulating Images

Cloudinary’s rich API can apply a large variety of dynamic image manipulations such as:

  • Resize and Crop

For React, Cloudinary provides several components, such as Image and Transformation which are used as follows (note transformations can be sequenced):

    <Image cloudName=”demo” publicId=”bike.jpg” alt=”Bike” />
        <Transformation height=”100” width=”120” crop=”fill” gravity=”west” />
        <Transformation fetch_format=”auto” />
    </Image>

image alt text

Or, like this one (you get the picture, err, image):

    <Image cloudName=”demo” publicId=”bike.jpg” alt=”Bike” />
        <Transformation height=”700” width=”800” x=”350” y=”300” crop=”crop” />
        <Transformation height=”100” width=”120” crop=”fill” />
        <Transformation quality=”40” />
    </Image>

image alt text

  • Face Thumbnail (circle, rotation)

image alt text

image alt text

  • Special Effects and Artistic Filters

image alt text

  • Watermark and Text Overlays

image alt text

Cloudinary is particularly effective when used for use-case specific image and video manipulations, such as for eCommerce Showcase applications.

React made Visual

Although Cloudinary API can be used anywhere in your JavaScript code (client or server), a React SDK was called for so we made a library that you can “npm install” and easily configure. Just remember that if for some reason the SDK doesn’t support what you’re trying to build, you can always use the URL/HTTP-based API directly.

Examples with React

image alt text

image alt text

image alt text

image alt text

Deliver with Speed

Happy users come from snappy hacks. An image is worth a 1000 words but that’s often felt in heavy page weight, which slows down performance. To make sure your app isn’t bogged down by unoptimized images, Cloudinary provides a test tool for web images with actionable recommendations. This way, you can rest assured your users experience the fastest page load times.

Visuals FTW

Using images (and videos) in your hack is a great way to tilt the winning odds in your favor, whether you’re building a rich media app or adding media features to your app functionality. To succeed and have fun in the process, Cloudinary’s rich APIs allows you to work smart and save precious time in building an impressive React app. Get started quickly with a free Cloudinary account, so you can upload, store, manipulate, optimize and deliver images and videos to your heart’s content immediately. Good luck and happy hacking!


How Search Can Save You Time And Improve Your Hack

Posted Jun 23, 2017

As you begin hacking this weekend, have you considered integrating search into your project? Likely, no, because you think that building search will take too much time. But it doesn’t have to if you use Algolia.

You can now build Algolia search applications directly in React using the tools and patterns that you're already familiar with. Meet React InstantSearch, a library that provides more than 20 out-of-the-box widgets for React that enable faceting, filtering, geo-location, typo-tolerance and more.

React InstantSearch Getting Started Video

Here's an example of the type of experience that can be built with React InstantSearch. Each piece of this UI is a widget, including the search box, faceting sidebar, results and even the "Clear All' link.

React InstantSearch Code Snippet

Our React library (was just upgraded to v4 and now includes the ability to query multiple indices, add an enhanced autocomplete and more) features everything you need to bootstrap your app, display results from Algolia and widgets that help you filter and refine the results.

React InstantSearch In Use

Get started with React InstantSearch, sign up for Algolia and create your account. Then, see our Getting Started Guide. Our Community Plan provides 10,000 records and up to 100,000 operations per month at no cost and gives you access to ask questions and seek help on our community forum.

The team at Algolia reminds you to stay hydrated, obsess over the right details, and have a lot of fun doing it. Good luck from all of us at Algolia to this year's React Riot teams!


Minimum Viable Hack

Posted Jun 22, 2017

Minimum Viable Hack

mvh

You’ve decided to participate in the React Riot hackathon - that’s pretty rad. How do you put together the best possible project in the limited amount of time you have?

Your first instinct is to prepare beforehand — you’ve got all the time in the world leading up to the event! Unfortunately, though, you only have the 48 hours to actually develop the React app, with no digital assets pre-made during the hackathon.

You have an idea, napkin sketches and an up-front agreement on tabs versus spaces with your teammates. Now you need to prioritize your efforts to make the most of your time. In order to understand why the Minimum Viable Hack is appropriate, let’s take a look at the MVP.

Minimum Viable Product

The Minimum Viable Product, according to Eric Ries, is the “version of a new product which allows a team to collect the maximum amount of validated learning about customers with the least effort”.

Typically the MVP defines your product’s target market, top features and cost. The key here is to minimize resources (cost), while maximizing validation of your product (features) with your target market. Once the MVP is shipped, you should be geared to continuously build, measure and learn, until you’ve garnered substantial, accurate data to achieve product market fit.

During a hackathon, your time is scarce. Rather than many months of testing and iteration, you’re preparing for a stretch of only a few hours. Achieving product market fit is winning. You want to present the minimum viable project to extract the best score from the judges - your target market.

How do you do this in such short time?

Minimum Viable Hack

To build the MVH of your app/software/API, here’s what you should do:

Strategize with a clear vision (don’t scramble)

During your 48-hour crunch, no one person should be straying away. Disorganization increases your chance of failure. Ensure that the time you have preparing for the hackathon includes multiple revisions of how you’ll execute during the hack.

Leave the heavy lifting to novel problems and impressive feats

Do as little as possible from scratch. What you’re doing is great; however, ensure it doesn’t take up too much time or effort for a hackathon. With the 48 hours you have, forget all of the heavy lifting required for building the next Facebook.

Why create your database or logging service from scratch? Manifold lets you simplify your project and quickly spin up developer services in just a few clicks. Pair those services with Zeit Now real-time deployment, and you’ve saved substantial time, so you can focus on efficiently getting your product ready.

manifold_horizontal-dark

It doesn’t have to work if it looks like it does

Ideally, you’d want your finished product. If you’re demoing in a controlled situation - again - you’d want to do the most efficient you can to show the judges how you created the product. In this case, your team possesses more control in showcasing your React product. Therefore, you have more leeway of not having the “perfect” product, but you want to present your product in the best way possible.

However, if you’re not demoing in isolation, you want to make sure it works for whoever is trying your project. Provide as much guidance to the judges as possible. Over-communicating through preparing README and other documentation are keys to ensuring the judges receive a clear, functional view of how to use your product. Surprises are not good.

Fuel up - you don’t want to be crashing

Ensure you’re hydrated, eating and taking breaks. Joe Kutner’s “The Healthy Programmer” recommends that “You’ll also need to pick two or three exercises you want to do. They could be walking, nerve-gliding, curl-ups..” Stay caffeinated, but don’t overdose/consume incredibly unhealthy amounts. What’s the fun if one of your team members taps out during the competition that your team worked so hard for?

The Minimum Viable Hack ticks all the boxes to succeed in a hackathon, while working smartly and saving ample time that can be used to focus on producing your best React app. Start saving time now with Manifold, so you can easily spin up a database or search service.

Make the most out of your 48 hours, and remember to have fun! Good luck! Happy Hacking!


Give Yourself A Competitive Advantage: Sencha ExtReact

Posted Jun 15, 2017

Guest post by Sandeep Adwankar. Sandeep is a Sr. Product Manager at Sencha and is passionate about innovations in mobile and web technologies. He has experience working for startups in Silicon Valley as well as large companies including Motorola and Time Warner Cable. He has an MBA from DePaul University in Chicago and a Masters in Technology from IIT Bombay.

We’re very excited to be a sponsor of React Riot! We think our new ExtReact product is a perfect fit for the hackathon. It features more than 115 beautiful UI components, plugins for WebPack and Babel to optimize builds, and theming tools to give you complete control over your application’s look and feel.

We're so confident that ExtReact will benefit development teams, that we're offering free full-featured trials, so they can judge for themselves. Plus, each member of the winning React Riot team will receive a free license of ExtReact Premium, and each member of the second place team will win a free license of ExtReact Standard.

Try It Out

ExtReact Highlights

  • Harness the power of big data with the most powerful Grid component available.

  • Allow your users to slice and dice data with the Pivot Grid ad-hoc report builder component.

  • Create beautiful, dynamic applications with the 115+ Material design inspired components including Tabs, Dialogs, Sheets, Menus, Toolbars, and Lists.

  • Develop for all screens and environments using responsive layouts.

  • Build easy-to-use data entry forms using the extensive collection of form fields.

  • Add interactive scheduling functionality to your app with Calendar** components**.

  • Add stunning data visualization capabilities **to your app with an extensive collection of **charts and *D3 visualization *components.

  • Fully control your application’s look and feel with the powerful ExtReact theming API or use Sencha Themer to style your application without writing any code.

  • Compress and** optimize application builds with the provided **Webpack and Babel plugins.

For inspiration, we’re providing example applications** including the **ExtReact Conference App and ExtReact Kitchen Sink, with views for desktop, tablets, and smartphones. Good luck in the competition. We’re looking forward to seeing the awesome web applications you create with ExtReact during React Riot!

Here is more information about how ExtReact makes it easier than ever to create beautiful, sophisticated apps with React.

ExtReact Components

ExtReact Grid

Grids are often the centerpiece of powerful, data-driven applications. The ExtReact Grid provides a powerful way to display, sort, group, and edit data. All columns can be rearranged, resized, hidden, and sorted. Users can select rows, cells, or columns just like they can in Microsoft Excel. The Grid allows users to edit data on desktop, tablets, and smartphones, and it automatically chooses the right experience on each device. Data can be exported to Excel, CSV, TSV, and other formats.

image alt text

ExtReact Tree

Trees are often required for displaying hierarchical data in desktop, tablet, and smartphone applications. The ExtReact Tree is derived from the Grid component and inherits all of its features including column resizing, sorting, filtering, and cell editing, as well as drag and drop.

 render(){
        return(
            <Tree
                title="Heterogeneous Geographical Tree"
                store={this.store} >
                <TreeColumn
                    text="Name"
                    dataIndex="name"
                />
            </Tree>
        )
    }

image alt text

ExtReact Pivot Grid

Microsoft Excel’s pivot table is a popular mechanism for summarizing, aggregating, and exploring data. The ExtReact Pivot Grid provides a simple way to bring pivot capabilities to web applications. Pivot Grid enables your users to explore and aggregate multidimensional data with multiple aggregation methods such as sum, count, average, and more.

image alt text

ExtReact Calendar

You can add an entire Calendar feature to your app with just a single component. The ExtReact Calendar and related components digest and visualize event data based on timeframe (months, days, weeks, etc). The Calendar component comes with time zone support, as well as drag and resize validations.

image alt text

ExtReact Charts

Charting is an important part of providing great data visualization functionality. The ExtReact Charts package provides all of the common chart types in 2D and 3D such as pie, bar, column, line, and scatter, as well as more sophisticated charts such as box plots, candlesticks, and radar graphs. Each chart is compatible with all major browsers. Sparkline charts can also be embedded within Grid cells.

image alt text

ExtReact D3

D3 is an extremely popular choice for data visualization. The ExtReact D3 components make it easy to integrate D3 into your React application. D3 trees, sunbursts, heatmaps, and more are included as ready-to-use components that update in real time as data changes.

render() {
        return (
                <D3_Sunburst
                    store={this.store}
                    selection={selection}
                />
        )
    }

image alt text

ExtReact Forms

The ExtReact Form components provide input masking, data validation, keyboard navigation, and focus management to help you deliver pain-free data entry for your users.

ExtReact List

Lists are an important component in mobile-first applications. The ExtReact List component supports grouping, indexing, paging, and more. You can also configure multiple swipe actions, such as deleting or replying to a message, using an accordion or stepper design.

render() {
        return (
            <List
                store={this.store}
                plugins={[{
                    type: 'listswiper',
                    // left and right configs
                }]}
            />
        )
    }

ExtReact Tabs

Tabs are a great way to allow users to quickly flip between multiple views. With ExtReact Tabs, you get multiple configuration options for position, title, and icon. Tabs can also be closeable and disabled.

image alt text

ExtReact Features

Flexible Layouts

With ExtReact Layouts, you can handle the sizing and positioning of every component in the app across different form factors and device types. ExtReact provides layouts that automatically adjust the size of child elements based on the available space. Learn more by reading the ExtReact Layouts Guide.

Responsive Props

Each component can be configured with different prop values for different screen sizes and device platforms using the responsiveConfig and platformConfig props:

<SearchField
    ui="faded"
    placeholder="Search..."
    responsiveConfig={{
        "width <= 600": {
            flex: 1
        },
        "width > 600": {
            width: 200
        }
    }}

    platformConfig={{
         "phone": {
               ui: 'faded-phone'
         }
    }}
/>

Learn more by reading the ExtReact Developing for Multiple Environments and Screens guide.

image alt text

Data Package

ExtReact provides a data package to efficiently scale remote data with ease. The data package allows your application to connect to any back-end data source and provides real-time update capabilities to grids, trees, charts, and more, as well as declarative sorting, filtering, and grouping. It features an extensible validation system with numerous built-in validators for currency, date, email, exclusion, inclusion, format, ip address, length, number, phone, time, and more. Learn more by reading the ExtReact Data Package guide.

We created an application example to show you how to use ExtReact's data store with a REST proxy and implement server-side sorting, filtering, and paging using node.js and SQLite. Check out the GitHub repo and follow the README instructions to get started.

Theming

ExtReact features an extensive Sass-based theming API that gives developers complete control over the look and feel of their applications. ExtReact Premium includes Sencha Themer, a tool that allows both designers and developers to create beautiful themes for ExtReact apps without writing code. Learn more by reading the ExtReact Theming guide.

image alt text

TypeScript Definitions

ExtReact includes TypeScript definitions that enable code completion in several code editors including Visual Studio Code. This feature allows you to receive completion suggestions for ExtReact components and props.

image alt text

Sencha Fiddle for ExtReact

Sencha Fiddle is a free tool that allows you to try ExtReact code in your browser without downloading or installing anything. You can easily share your ExtReact code by saving and sharing Fiddle URLs.

image alt text

Accessibility

ExtReact components support basic accessibility features such as keyboard navigation and focus management. You can use the keyboard to navigate between and edit grid cells, switch tabs, control list selection, navigate trees and menus, open and close dialogs, and more.

Real-Life Example - Conference App

We’ve provided an example application on GitHub called the ExtReact Conference App. The ExtReact Conference App (also available to view on our Examples web page) shows you how to build a responsive UI using ExtReact components to handle desktop, tablets, and smartphones. It also shows you how to integrate two of the most popular libraries in the React ecosystem: Redux and React Router.

image alt text


Win React Riot With This Tech Stack

Posted Jun 8, 2017

Hackathons are a very competitive environment where developers, designers and other creatives build cool products in a very short amount of time. Because of these time constraints, it's impossible to build out every part of the system properly - so one key advantage when attending a hackathon is knowing which parts of your application to focus on!

Our team at Graphcool is full of hackathon enthusiasts! Among others, our founder Johannes won HackZurich, Europe's biggest hackathon, in 2014 and Nikolas won the Burda Hackday twice, in 2014 and 2015. Tim saw hackathons from the other side, organizing them and as a judge.

In this post, we'll share our experience and tell you how to improve your chances of winning React Riot by following three simple rules:

  1. Focus on your product
  2. Do one thing - and do it right
  3. Use the best tool for the job

1. Focus on your product

You're working for 48 hours straight but only have a few minutes of spotlight to present the outcome - this makes it even more important that your demo is extremely polished. In the end, it's of major importance to focus on your frontend! Whether that's a mobile, web or desktop app - your frontend is what people are going to see and that's what your team will be judged by!

One thing you definitely want to avoid at a hackathon is to spend time writing backend code. Of course in real-world applications, the backend is an integral part of any major system. You might be an API Ninja, a DevOps Rockstar or a Database Guru! No matter which of these titles you'd like to claim for yourself - trying to play them out at a hackathon will likely not help you succeed.

2. Do one thing - and do it right

One thing that fundamentally distinguishes hackathons from real-world engineering is that you can (and should) completely ignore edge cases and error handling in a hackathon environment.

With the limited amount of time you have for building your app, you need to think of the single major use case that you'll showcase during the demo. (It's fine to partially or fully mock the data being used for that scenario.)

Of course it would be great if your tool had an admin panel, or an  Watch integration. But are these gimmicks really essential for your core idea?

3. Use the best tool for the job

A hackathon is not the right environment to reinvent the wheel. Try to seek for frameworks and tools that help you save time in building the functionality you envision. You can start researching for these tools before the hackathon even begins.

If your product should have a search engine, use the Algolia service for example. Authentication can be easily implemented with Auth0. When building a React Native app, you should use a tool like Expo that helps you with common functionality and lets you focus on the real important parts of your product! A tool like Graphcool completely takes any backend work off your shoulders.

The perfect Hackathon stack

In conclusion, what does your perfect stack for React Riot look like? You need a well-working and polished UI with data that shows an interesting path through your application! All that without spending much time on the backend and by taking advantage of existing tools.

Here's what we suggest:

  • Frontend: React + Apollo
  • Backend: GraphQL API & serverless functions

GraphQL is a new API standard that was developed and open-sourced by Facebook. It allows to fetch and update data from an API in a declarative manner. It thus ties in perfectly with React, where views are also composed declaratively.

Instead of having to write your own GraphQL server, you can use Graphcool that'll get you a full-blown GraphQL API right off the bat. If you need to feed data into it without user interaction, you can easily do so by using the Playground. This will save you unnecessary time, sweat and tears spent on the backend and everything will be ready so you can focus on the frontend!

Speaking of the frontend, how does the data end up in your React components? That's what you're using Apollo Client for. All you need to do is write your query next to your component, use Apollo's higher-order graphql component and the server response will be available in your component's props.

How to get started with React, GraphQL & Apollo?

The fastest way to get started is by using the React + Apollo Quickstart example. For a more comprehensive tutorial, you can read the Getting Started Guide on the Apollo Blog or watch our 5 min Tutorial video.